Question

JS，返回名字：

$.ajax({
    url: 'exm1.php',
    type: 'get',
    dataType: 'json',
    success: function(data){
        if( t<data.length){
            for(var i=0;i<data.length;i++){
                $("#output").html(data[i].fn);
            }
        }
    },
    error: function() {
        // TODO: do error handling here
        console.log('An error has occurred while fetching lat/lon.');
    }
});

我想首先解决两件事：

它总是覆盖输出div标签。我不知道如何阻止这个
setInterval只应在数据库发生变化时运行，或者data.length发生变化时，是否有任何方法可以存储先前的data.length值，然后与之进行比较新 data.length

Answer 1

如果#output包含名字，那么您可以在加载时将其定位并保存到变量中

示例：

var firstname = $('#output').html();

然后你要做的就是将AJAX输出与变量进行比较。

示例：

if ( firstname != data ) $('#output').html(firstname);

Answer 2

要防止覆盖div标签，请使用以下内容。

~/scripts me$ cat hiPython 
python ~/scripts/hi.py
~/scripts me$ cat hi.py
print("im python")

我不明白你的意思是setinterval，请在你的代码中澄清。

Answer 3

您可以使用此（vanilla javascript）

将html保留在div中

var inTheOutPutDiv = document.getElementById("output");
inputTheOutPutDiv.html = inputTheOutPutDiv.html + data; // whatever
// or use  inputTheOutPutDiv.html+= data;

但感觉你正在使用Jquery，你可以使用追加

$("#output").append(data);

您可以在函数外部实例化一个包含数据库查询（范围）长度的变量。或者，您可以返回一个数据库值，该值指示信息是否已更新（如果更改则值为1，如果相同则值为0）。然后使用条件语句对响应执行操作。你有很多选择。

Answer 4

不幸的是，只有在数据发生变化时才能调用setInterval，但是你可以按设定的间隔运行某些东西，只有在结果不同时才更新#output html 。

#output被覆盖的原因是因为调用$ .html（＆＃34; ...＆＃34;）将用参数替换现有的html。我建议您只想在页面上以不同的div放置您想要保持静态的内容。

<div id='oldOutput'>
    Static Text Here: firstName?
    <span id='output'></span>
</div>

现在你的ajax返回将覆盖该元素，你的静态文本将保留。但是，您仍有一个问题，即循环的每次迭代都将从之前删除字符串。如果你想让每个循环都干净利落，我建议你按照以下几点推荐：

success: function(data){
    if( t<data.length){            
        // if you want to flush the #output each time
        $("#output").html("");
        for(var i=0;i<data.length;i++){
            $("#output").append(data[i].fn);
            // or you could put each entry in a div for later use
            // $("#output").append("<div id='div_"+ i +"'>" + data[i].fn + "</div>");
        }
    }
}

在这种情况下（你每次都要刷新div）然后如果数据相同，你就不应该注意到它的更新。如果你没有刷新div，那么数据会一直追加到最后。

如果这是你想要的，但只有当有新数据时，你可以计算#output范围内子div的数量 - 如果你把div中的每个项目包装成div，就像我上面那样，你应该能够将它与data.length：

进行比较

success: function(data){
    if (t<data.length){
        // gets direction descendants of #output that are divs, 
        // and counts the length of the array returned
        var numItems = $("#output > div").length; 

        if(numItems != data.length){
            loop goes here..
        }
}

这将是一种工作，它只会在返回的项目数量与您已有的项目数量不同时更新。但是，如果您的脚本返回了一组数据，并且您需要对其进行过滤以查看旧的和新的内容，则会略有不同。您需要包含某种标识符（数据本身除外），以便在以后检查它是否存在。

if ( $("[data-id=" + data[i].identifier +"]").length > 0 ) {
    // already exists, do nothing
} else {
    $("#output").append("<div data-id='"+ data[i].identifier +"' etc...
}

如何在数据库更改时更新html页面

4 个答案: