如何从用户提交的帖子中制作提要答案

【问题标题】：How to Make a Feed From User Submitted Posts如何从用户提交的帖子中制作提要
【发布时间】：2011-05-30 19:16:08
【问题描述】：

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

我要做的只是一个简单的页面，其中包含一个带有提交按钮的文本区域框，并让用户提交的内容在提交时显示在框下方。

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

非常感谢

【问题讨论】：

标签： javascript jquery ajax web-applications

【解决方案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);
});

【讨论】：

Amjad，非常感谢您的评论。就在最近我重建了网站并且我有一个提交按钮。我知道这听起来完全不适合我问，但是我该如何实现这段代码呢？我已经很感激你为我写出了所有的代码，但我想知道 1）我如何创建存储最后一个帖子 ID 的 javascript 代码？我创建一个扩展名为 .js 的文件并将必要的代码写入其中？ 2) 对于发布新条目，我会使用什么语言？ HTML\JS？最后，客户端和服务器端文件是分开的吗？除了 index.php，我还有单独的文件吗？泰
我已经在 $.ajax 的成功函数的代码中添加了 last_id var，但是你必须初始化它并使其成为全局变量，只需在声明变量时省略“var”关键字或使用 window.last_id。对于 JS 代码，您可以将它放在一个单独的 .js 文件中，只要您希望在您的 Web 根目录中的任何位置，只要使用 HTML 中的相对路径即可引用它（如果您使用一个或将其嵌入到部分中，或者您可以将其全部打印出来）来自您的 index.php (HTML + JS)。至于发布新条目，您可以使用 submit_post 上面的函数并将其绑定到点击事件： $('buttonid').click(submit_post)
我会在接下来的几天里尝试快速实现一些东西给你一个想法，但同时我建议你做一些阅读和实验。但是如果你没有时间尝试使用一个框架，例如drupal.org joomla.org，因为它可以简化和处理文件结构并为你提供非常有用的功能，也许你可以在社区贡献中找到你想要的东西.

【解决方案2】：

有很多方法，例如提交按钮不断将其发送到数据库，而我们将文本附加到下面的容器中。或者我们可以更新下面的容器，创建一个类似的容器（页面），在ajax响应成功后，我们将数据附加到下面的容器中

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

但您必须拥有与当前页面中存在的容器（提要容器）完全相同的视图

【讨论】：