Cómo hacer un feed de las publicaciones enviadas por el usuario

Estoy tratando de averiguar cómo usar AJAX para crear un feed similar a Twitter que muestra las publicaciones de los usuarios en la misma página inmediatamente después de presionar el botón de envío. Sería un sitio de alimentación infinita que tendría un botón “más” en la parte inferior.

Todo lo que estoy tratando de hacer es una página simple que contenga un cuadro de área de texto con un botón de envío y que las presentaciones de los usuarios aparezcan debajo del cuadro a medida que se envían.

Si es posible, un recorrido o una discusión del guión necesario para hacer esto sería genial.

Muchas gracias

Todo lo que necesita es una secuencia de comandos del lado del servidor con una consulta SQL que devolvería las publicaciones más recientes. haga que su javascript almacene una variable de la fecha o del último id de la publicación (PHP utilizado para aclaración):

result = mysql_query("SELECT ID,POST FROM POSTS WHERE DATE>" . $_GET['date']); //or use WHERE ID> $_GET['id'] while(rows[] = mysq_fetch_array(query)); print json_encode(rows); 

ahora tienes un script del lado del servidor que devolverá nuevas publicaciones, así que todo lo que tienes que hacer es escribir la función javascript para el botón más:

 updatePosts = function () { $.ajax({ url: 'serversiderUrl?lastId=' + last_id, //last_id is global variable for the id of the last post on the page success: function(data){ data = JSON.parse(data); for(i in data){ $('#posts_container').append(data[i].post); //do your appending functions here last_id = data[i].id; } } } 

Ahora, para publicar nuevas entradas, cree un script del lado del servidor de su idioma favorito que maneje las nuevas publicaciones:

 result = mysql_query("INSERT INTO POSTS VALUES(''," . urldecode($_POST['POST']) . ")"); 

ahora para el lado del cliente:

 submit_post = function(){ $.ajax({ type: 'POST', url:'yourposturl', data: "post=" + encodeURIComponent($('#textArea').text()), success: function(){ updatePosts(); // call the function that update the posts so the new entry is now added to the page } }); } 

Ahora enlace las funciones a los botones apropiados cuando el documento esté completamente cargado:

 $(document).ready(function (){ $('#moreButtonId').click(updatePosts); $('#submitButtonId').click(submitPost); }); 

Hay muchas formas, como el botón de envío que se envía a la base de datos mientras adjuntamos el texto a un contenedor debajo. O podemos actualizar el contenedor debajo para crear un contenedor (página) que sea similar, después de que la respuesta ajax sea exitosa, a continuación, agregamos los datos al contenedor debajo.

 $.post(url,function(data){ //Here you can append the data responsed by the ajax request to the container underneath }); 

Pero tiene que tener una vista exactamente igual con un conatiner (contenedor de feed) existente en la página actual