Question

我正在尝试检测然后使用ajax / jQuery方法收集新的PHP数组对象（有点像api）。

{
    "posts": [
        {
            "id": "77",
            "post": "&quot;Oh cool bro&quot;",
            "time": "Mar 02, 2014"
        },
        {
            "id": "76",
            "post": "Ohh",
            "time": "Mar 02, 2014"
        },
        {
            "id": "75",
            "post": "Yupp",
            "time": "Mar 02, 2014"
        },
        {
            "id": "74",
            "post": "This is content",
            "time": "Mar 02, 2014"
        }
    ]
}

我正在尝试使用ajax检测数组中的新更改，如果用户提交新帖子，则实时使用 id 78 的帖子更新数组。我希望能够检测到添加，并且只能查找新帖子。此外，我希望Feed能够每5秒检查一次新帖子，并附加新帖子而不是重新附加所有帖子。几乎完全像facebook feed ticker。

我的jQuery / ajax代码：

function getFeed() {
    $.ajax({
        type: "GET",
        url: "api.php",
        dataType: 'json',
        success: function(data) {
            var posts = data.posts
            $.each(posts, function(i) {
                $('#posts').append("<div class='post' id='" + posts[i].id + "'>" + "<div class='content'>" + posts[i].post + "</div>" + "<div class='meta'><div class='d'>" + posts[i].time + "</div> - <a href='/edit/" + posts[i].id +"'>Edit</a> - <a href='destroy.php?id=" + posts[i].id + "'>Delete</a></div></div>");
            });
        } 
    });
}

Answer 1

为什么不将当前帖子ID存储在JavaScript数组中？

//An array that will contain the IDs of posts that have already
//been appended.
var displayedPosts = new Array();

//Function to get feed.
function getFeed() {
    $.ajax({
        type: "GET",
        url: "api.php",
        dataType: 'json',
        success: function(data) {
            var posts = data.posts
            $.each(posts, function(i) {
                //Make sure that this post hasn't already been added.
                if($.inArray(posts[i].id, displayedPosts) === -1){
                    //Store the ID of the post so that we don't add it again.
                    displayedPosts.push(posts[i].id);
                    //Append
                    $('#posts').append("<div class='post' id='" + posts[i].id + "'>" + "<div class='content'>" + posts[i].post + "</div>" + "<div class='meta'><div class='d'>" + posts[i].time + "</div> - <a href='/edit/" + posts[i].id +"'>Edit</a> - <a href='destroy.php?id=" + posts[i].id + "'>Delete</a></div></div>");
                }
            });
        } 
    });
}

我必须注意，更好的解决方案将涉及使用发送到api.php的timestamp参数。即告诉我在特定时间戳之后发布的所有帖子（在这种情况下，您将发送最后一篇帖子的时间戳作为参数）。这样，您就不会重复向客户端发送相同的数据。

Answer 2

第一次调用api.php时，可以在localStorage中保存该用户的最后一个帖子然后sucesive调用检查你是否有一个值为last postId，忽略循环中的所有其他值，直到你找到新的postID。

 $.each(posts, function(i) {
               if(!localStorage["usernameX"]){
                  localStorage["username"] = posts[i].id;
                    $('#posts').append("<div class='post' id='" + posts[i].id + "'>" + "<div class='content'>" + posts[i].post + "</div>" + "<div class='meta'><div class='d'>" + posts[i].time + "</div> - <a href='/edit/" + posts[i].id +"'>Edit</a> - <a href='destroy.php?id=" + posts[i].id + "'>Delete</a></div></div>");
                }else{
                   if(post[i].id >  localStorage["usernameX"]){
                        $('#posts').append("<div class='post' id='" + posts[i].id + "'>" + "<div class='content'>" + posts[i].post + "</div>" + "<div class='meta'><div class='d'>" + posts[i].time + "</div> - <a href='/edit/" + posts[i].id +"'>Edit</a> - <a href='destroy.php?id=" + posts[i].id + "'>Delete</a></div></div>");
                    }
                }
                });

Answer 3

您应该在ajax请求中发送最后一个帖子id并获取ajax响应中的记录，这对性能也有帮助，什么时候试试这种方式

function getFeed() {
    var last_id  = $("#posts > div.post:last-child").length > 0 ? 
                      $("#posts > div.post:last-child").attr("id") : "0";
    $.ajax({
        type: "GET",
        url: "api.php",
        data : {"last_id" : }
        dataType: 'json',
        success: function(data) {
            var posts = data.posts
            $.each(posts, function(i) {
                $('#posts').append("<div class='post' id='" + posts[i].id + "'>" + "<div class='content'>" + posts[i].post + "</div>" + "<div class='meta'><div class='d'>" + posts[i].time + "</div> - <a href='/edit/" + posts[i].id +"'>Edit</a> - <a href='destroy.php?id=" + posts[i].id + "'>Delete</a></div></div>");
            });
        } 
    });
}

如果last_id = 0，则帖子为空

并使用setInterval每5秒调用一次getFeed

setInterval(function() { getFeed(); }, 5000);

Answer 4

在JS中添加一个变量来记忆显示的最后一篇文章的ID。

创建一个PHP函数，返回最后一篇文章的id。

然后在你的JS中添加像这个伪代码的一些东西：

setInterval(function() {
      // get the id of the last post
      // if it is  greater than the last post known by the JS, invoke getFeed()
}, 5000); // the time in milisecond before the next invocation of this function

您必须完成getFeed（）才能发送您显示的上一篇文章的ID，因此PHP返回仅返回要追加的帖子。最后，根据在getFeed（）中调用API返回的数据，更新上次显示的帖子的ID。

在新数组项的ajax中附加PHP数组项

4 个答案: