在不刷新页面的情况下更新前端数据

Question

我需要用当前数据更新数据库中的数据。我的意思是说，如果数据库数据被更新，那么它在前端更新而不刷新页面。

示例：如果div 数据541236 &&db 数据541236，如果数据库数据像这样更新547896则在前端更新此数据，而无需刷新页面。

这是我的代码示例。

 function recordsCrawled(resp){
    var data = {'action' : 'recordsCrawled'};
    var outPut = '';
    $.post(ajaxurl, data).success(function (resp) {
       //console.log(resp);
        var json = $.parseJSON(resp); // converting response to a json obj
        //console.log(resp);
        var records_crawled = "";
        var today_crawled = "";
        var no_of_hits_today = "";
        var sites_crawled = "";
        //alert(resp)
            for(i in json){
                records_crawled = json[i].records_crawled;
                today_crawled = json[i].today_crawled;
                no_of_hits_today = json[i].no_of_hits_today;
                sites_crawled = json[i].sites_crawled;
                $('#records_crawled').html(records_crawled);
                $('#crwl_today').html(today_crawled);
                $('#no_of_hits').html(no_of_hits_today);
                $('#sits_crawled').html(sites_crawled);
            }
    });
}

Answer 1

将div 的文本内容与其相应的新 db 值进行比较。如果它们不同，请使用新数据库的值更新div：

if($('your_div').html != new_db_value) {
    $('your_div').html = new_db_value;
}

Answer 2

您可以使用 SignalR 或 Firebase 等技术。这些技术对于这种情况非常有效。例如，在 SignalR 中，可以在线程上设置计时器对象，以检查数据库中特定时间段内的新数据。

public class MetricHub : Hub
{
}
public class BackgroundTicker : IRegisteredObject
    {
        private Timer devicesTimer;
        public BackgroundTicker()
        {
            HostingEnvironment.RegisterObject(this);
            hub = GlobalHost.ConnectionManager.GetHubContext<MetricHub>();
            deviceAvailabilityTimer = new Timer(OnDeviceAvailabilityTimerElapsed, null,
                TimeSpan.FromMinutes(1), TimeSpan.FromMinutes(1));
       }
    private void OnDeviceAvailabilityTimerElapsed(object sender)
    {
        // Code to fetch data from the database
        hub.Clients.All.broadcastDeviceAvailabilityData(finalResult);
    }
 }

这是我研究过的一个例子这是前端的javascript代码：

hub.client.broadcastDeviceAvailabilityData = function (devicelist) {
}

Answer 3

这是正确答案的伙计们。我只需要在我的 ajax 函数端添加它。

.complete(function(){
    setTimeout(function(){recordsCrawled();}, 10000);
}).responseText;