Как сделать фид из сообщений, отправленных пользователем

Question

Я пытаюсь выяснить, как использовать AJAX для создания Twitter-подобного канала, который отображает сообщения пользователя на той же странице сразу после нажатия кнопки «Отправить». Это был бы сайт с бесконечной подачей, в нижней части которого была бы кнопка «еще».

Все, что я пытаюсь сделать, - это простая страница, содержащая текстовое поле с кнопкой отправки, и пользовательские представления отображаются под полем по мере их отправки.

Если это возможно, было бы здорово пройтись или обсудить сценарий, необходимый для этого.

Большое спасибо

Answer 1

Все, что вам нужно, это серверный скрипт с запросом SQL, который будет возвращать новые сообщения.пусть ваш javascript хранит переменную даты или идентификатора последнего сообщения (используется PHP для пояснения):

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);

теперь у вас есть серверный скрипт, который будет возвращать новые сообщения, так что все, что вам нужносделать, это написать функцию JavaScript для кнопки больше:

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;
                         }
                     }
}

теперь для публикации новых записей создайте серверный скрипт на вашем любимом языке, который обрабатывает новые сообщения:

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

сейчас дляна стороне клиента:

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
                }
   });
}

Теперь, когда документ полностью загружен, свяжите функции с соответствующими кнопками:

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

Answer 2

Есть много способов, например, кнопка отправки продолжала отправлять ее в базу данных, пока мы добавляли текст в контейнер внизу. Или мы можем обновить контейнер внизу, чтобы создать похожий контейнер (страницу), после успешного ответа ajax мы добавляем данные в контейнер ниже

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

Но у вас должен быть точно такой же вид с conatiner (контейнером подачи), существующим на текущей странице