Question

我正在试图弄清楚如何使用AJAX创建类似Twitter的源，在推送提交按钮后立即在同一页面上显示用户的帖子。它将是一个无限馈送站点，底部会有一个“更多”按钮。

我想要制作的是一个简单的页面，其中包含一个带有提交按钮的textarea框，并且在提交时会在框下方显示用户提交的内容。

如果可能的话，执行此操作所需的脚本的演练或讨论将会很棒。

非常感谢

Answer 1

您只需要一个带有SQL查询的服务器端脚本，该脚本将返回较新的帖子。让您的javascript存储日期或最后一个帖子ID的变量（使用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（Feed容器）完全相同的视图

如何从用户提交的帖子中提取Feed

2 个答案: