jQuery AJAX 超时调用函数

Posted 2023-05-07

【中文标题】jQuery AJAX 超时调用函数

【英文标题】：jQuery AJAX call function on timeout

【发布时间】：2016-09-24 23:42:00

【问题描述】：

我正在尝试重新加载我的 jQuery DataTables 而不刷新页面以尝试捕获新数据。

这是我开始该过程的初始准备函数：

 $(document).ready(function()
 
   $.ajax(
     url:'api/qnams_all.php',
     type:"GET",
     dataType:"json"
   ).done(function(response) 
       console.log(response.data);
       renderDataTable(response.data)
   ).fail(function() 
       alert( "error" );
   ).always(function() 
       alert( "complete" );
   );  
 );

我正在向这个函数发送数据：

 function renderDataTable(data)
 
   var $dataTable = $('#example1').DataTable(
     "data": data,
     "iDisplayLength": 25,
     "order": [[ 6, "desc" ]],
     "bDestroy": true,
     "stateSave": true
     // there's some more stuff, but I don't think necessary to show
   );
 

我正在尝试利用此处找到的答案：How to refresh table contents in div using jquery/ajax

如下：

 setTimeout(function()
   $( "#example1" ).load( "mywebpage.php #example1" );
 , 2000);

使用以上所有代码，页面首次加载时，如下所示：

但是刷新后是这样的：

上面的图片确实在没有刷新页面的情况下重新加载，但我不确定为什么它看起来像上面的图片。

【问题讨论】：

换出表格的内容会吹走DataTable添加的东西。

【参考方案1】：

我认为这个例子会很有用

//Reload the table data every 30 seconds (paging reset)
var table = $('#example').DataTable( 
    ajax: "data.json"
 );

setInterval( function () 
    table.ajax.reload();
, 30000 );

更多详情 - here

【讨论】：

@HoodCoderMan，我会先检查这个解决方案，因为我认为它会更好。

如果我没看错的话，我是否要添加到 var $dataTable = ('#example1').DataTable( "data": data, "ajax": data.json , ..... );这是正确的吗？

您的示例将是这样的： var $dataTable = $('#example1').DataTable( ajax: "api/qnams_all.php" );

@D.Dimitrioglo 使用上述方法和您建议的文本，我几乎可以正常工作。但是现在，我遇到的问题是当页面第一次加载时，所有的记录都是重复的。有什么想法吗？

您应该调试您的代码以找出记录重复的原因。一旦牌桌完成平局，就会触发draw 事件。 $('#example1').dataTable(); $('#example1').on('draw.dt', function () console.log('DataTable has draw!'); );

【参考方案2】：

创建一个函数来加载/渲染数据，然后在文档就绪并在 2 秒后调用它：

function loadAndRender()

    $.ajax(
    
        url:'api/qnams_all.php',
        type:"GET",
        dataType:"json"
    ).done(function(response)
    
        console.log(response.data);
        renderDataTable(response.data)
    ).fail(function()
    
        alert( "error" );
    ).always(function()
    
        alert( "complete" );
    );  



function renderDataTable(data)

    var $dataTable = $('#example1').DataTable(
    
        "data": data,
        "iDisplayLength": 25,
        "order": [[ 6, "desc" ]],
        "bDestroy": true,
        "stateSave": true
        // there's some more stuff, but I don't think necessary to show
    );


$(document).ready(loadAndRender);

setTimeout(loadAndRender, 2000);

【讨论】：

可以用loadAndRender函数代替顶部的document ready函数吗？

你先定义两个函数。然后你调用loadAndRender 两次：第一次是文档准备好，然后是 2 秒后。

我可能会先检查D.Dimitrioglo's 解决方案。我对DataTables 一无所知，但看来他可能是更好的方法。