javascript - 当新 key 位于 json 中时，PHP ajax 添加新的 div

Question

首先我要感谢您阅读本文:)。

我正在使用 PHP 和 jQuery 创建实时聊天。是的，我知道你现在在想什么。使用 Socket.IO。我知道，而且我愿意。但首先我想用 Ajax 创建一个。所以如果你要说使用 websockets 或 node.js 或其他东西，它对我没有帮助。我只是想解决这个问题。

所以我的问题。

聊天数据将被解析为文件中的 json 数组。

[{"id":"1","user_id":"2","user_clr":"red","message":"Test bericht","timestamp":"2017-03-09 16:04:34","username":"Vienna"},{"id":"2","user_id":"1","user_clr":"blue","message":"Test berciht 2","timestamp":"2017-03-09 16:04:32","username":"Chris"},{"id":"3","user_id":"2","user_clr":"red","message":"tst bericht 4","timestamp":"2017-03-09 16:04:35","username":"Vienna"},{"id":"4","user_id":"2","user_clr":"red","message":"test bericht 3","timestamp":"2017-03-09 16:04:36","username":"Vienna"},{"id":"5","user_id":null,"user_clr":"sda","message":null,"timestamp":null,"username":null},{"id":"6","user_id":"1","user_clr":"blue","message":"Test","timestamp":null,"username":"Chris"},{"id":"7","user_id":null,"user_clr":null,"message":null,"timestamp":null,"username":null},{"id":"8","user_id":null,"user_clr":null,"message":"TEST","timestamp":null,"username":"TEST"}]

是的，这是一个有效的 JSON。

其中有一些空值，但这并不重要。

我现在正在使用这个 jQuery:

function loadChats(){
$.getJSON('/d.php', function(data) {
    console.log(data.length + " keys loaded");
    var strVar="";
    $( "#view_ajax" ).empty();
    $.each(data, function(index) {
       strVar += "<div class=\"messenger-message-container\" style=\"color:white;\">";
    strVar += "                              ";
    strVar += "                                <div class=\"messages\">";
    strVar += "                                    <ul>";
    strVar += "                                        <li>";
    strVar += "";
    strVar += "                                            <div class=\"message\"><font color=\"black\">";
    strVar +=                                              "<\/font>";
    strVar += "                                               ";
    strVar += "                                                <div style=\"background-color:" + data[index].user_clr + ";\">";
    strVar +=                                                   data[index].username + ": " + data[index].message;
    strVar += "                                                <\/div>";
    strVar += "                                            <\/div>";
    strVar += "                                        <\/li>";
    strVar += "                                          <div class=\"time-ago\">1:26<\/div>";
    strVar += "                                    <\/ul>";
    strVar += "                                <\/div>";
    strVar += "                                ";
    strVar += "                            <\/div>";

    });
    $('#view_ajax').append(strVar);

});
setTimeout("loadChats()", 1000);
}

 loadChats();

现在正在刷新整个 div。它清空 html 并将该 html 再次放入 strVar 中，因此现在也将包含新数据。

但我真正想要的是在打开聊天页面时加载聊天，然后仅检查数据库中是否有新行。如果是这样，请在输出页面上放置一个新的 div。因此旧消息不会再次加载。

我怎样才能实现这一点？

我尝试阅读其他有关数据的 ajax 教程，但我找不到正确的教程来清除我想要的内容。

----- 添加了来自 Guillaume STLR 的答案的 PHP 代码

<?php
require_once './core/init.php';
$toxDB = toxDB::getInstance();
$toxData = $toxDB->getAll('chats', 20);
print_r(json_encode($toxData->results()));

运行此函数时正在运行此查询

object(PDOStatement)[4]
public 'queryString' => string 'SELECT * FROM chats LIMIT 20' (length=28)

并且正在打印我上面提到的 JSON。

Answer 1

您可以尝试在本地存储已渲染的 id :

function loadChats(){
    $.getJSON('/d.php', function(data) {
        console.log(data.length + " keys loaded");
        var strVar="";
        $.each(data, function(index) {
            if(cacheId.indexOf(data[index].id) === -1) {
                //Store to cache
                cacheId.push(data[index].id);
                strVar += "<div class=\"messenger-message-container\" style=\"color:white;\">";
                strVar += "                              ";
                strVar += "                                <div class=\"messages\">";
                strVar += "                                    <ul>";
                strVar += "                                        <li>";
                strVar += "";
                strVar += "                                            <div class=\"message\"><font color=\"black\">";
                strVar +=                                              "<\/font>";
                strVar += "                                               ";
                strVar += "                                                <div style=\"background-color:" + data[index].user_clr + ";\">";
                strVar +=                                                   data[index].username + ": " + data[index].message;
                strVar += "                                                <\/div>";
                strVar += "                                            <\/div>";
                strVar += "                                        <\/li>";
                strVar += "                                          <div class=\"time-ago\">1:26<\/div>";
                strVar += "                                    <\/ul>";
                strVar += "                                <\/div>";
                strVar += "                                ";
                strVar += "                            <\/div>";
            }
        });
        $('#view_ajax').append(strVar);

    setTimeout("loadChats()", 1000);
    });
}
//Add caching
var cacheId = [];
loadChats();

您还可以通过向服务器发送最后聊天 ID 值并使用该值进行过滤，来使用后端过滤您的数据。像这样:

PHP:

$lastId = isset($_GET['last_id']) ? $_GET['last_id'] : null;
require_once './core/init.php';
$toxDB = toxDB::getInstance();

if($lastId) {
    //Don't know how to filter with your model, but you get it.
    $toxData = $toxDB->getAllBy('chats', 'WHERE ID > :ID', ['ID' => $lastId], 20);
}else {
    $toxData = $toxDB->getAll('chats', 20);
}

print_r(json_encode($toxData->results()));

Javascript:

 function loadChats() {
    $.getJSON('/d.php?last_id=' + lastId, function(data) {
        console.log(data.length + " keys loaded");
        var strVar="";
        $.each(data, function(index) {
            //Set last chat id
            lastId = data[index].id;
            strVar += "<div class=\"messenger-message-container\" style=\"color:white;\">";
            strVar += "                              ";
            strVar += "                                <div class=\"messages\">";
            strVar += "                                    <ul>";
            strVar += "                                        <li>";
            strVar += "";
            strVar += "                                            <div class=\"message\"><font color=\"black\">";
            strVar +=                                              "<\/font>";
            strVar += "                                               ";
            strVar += "                                                <div style=\"background-color:" + data[index].user_clr + ";\">";
            strVar +=                                                   data[index].username + ": " + data[index].message;
            strVar += "                                                <\/div>";
            strVar += "                                            <\/div>";
            strVar += "                                        <\/li>";
            strVar += "                                          <div class=\"time-ago\">1:26<\/div>";
            strVar += "                                    <\/ul>";
            strVar += "                                <\/div>";
            strVar += "                                ";
            strVar += "                            <\/div>";
        });
        $('#view_ajax').append(strVar);

    });

    setTimeout("loadChats()", 1000);
}

var lastId = null;
loadChats();

如果您必须选择:过滤更好。使用您的解决方案，即使聊天对话已经呈现，您也会每秒向连接到您页面的每个客户端发送不必要的(并且可能很大)JSON。通过过滤，您可以通过添加 WHERE 过滤器来节省带宽和数据库操作。