将返回 5000 行的 AJAX 调用拆分为包含 100 行的多个 AJAX 调用

JQ：

// counter that allows you to get a new set of rows
var step = 0;
// set variable if you want to restrict the number of rows will be loaded
var maxStep = 0;//
// how many rows should be returned
var count = 100;
// if the cancel button is pressed
var cancel = false;
$(function() {
    $('#load').click(function(){
        getData();
    })
    $('#cancel').click(function(){
        cancel = true;
    })
});
function getData()
{
    step++;
    //If cancel variable is set to true stop new calls
    if(cancel == true) return;
    // checks if the variable is set and limits how many rows to be fetched
    if(maxStep >0 and step >= maxStep) return;

    $.post('ajax.php'
        ,{
            'step':step,
            'count':count,
        }
        ,function(data, textStatus, jqXHR){   
             // do something with the data
             // when it finishes processing the data, call back function
             getData();
        }
        ,'json'
    )       
}

阿贾克斯。.PHP

$step = 0;
if(isset($_POST['step'])) $step = (int)$_POST['step'];
$count = 0;
if(isset($_POST['count'])) $count = (int)$_POST['count'];

if($step>0 and $count>0)
{
    $offset = ($step-1) * $count;        
    $limit = $offset.','.$count;
    // --------------        
    // your code here
    // --------------
    $sql = "SELECT *
        FROM $off_table,$cnt_table,$ctg_table
        WHERE  $off_table.id = $cnt_table.id
        AND $off_table.id = $ctg_table.id
        AND ".$cond_api."
        AND ".$cond_nt."
        AND ".$cond_cnt."
        AND ".$cond_ctg."
        LIMIT ".$limit;// <- limit
    $result = mysql_query($sql);
    $arr_result = array();
    while($row = mysql_fetch_assoc($result))
    {
        $arr_result[] = $row;
    }
    $arr_result_enc = json_encode($arr_result);
    echo $arr_result_enc;

    // echo rows
    echo json_encode($rows);        
}

客户端代码的大量重构，其中整个过程被分成三个独立的函数getBatch()、makeRows()和showData()，并由原始点击处理程序的一个非常修改的版本开始。

批处理由 getBatch() 控制，它使用两个额外的参数发出 ajax 请求 - start 和 batchSize 。这些指示服务器端脚本返回哪批数据。

makeRows()和showData()只是getBatch()调用的同步工作器函数。

我假设进度是在 DOM 元素"#progress"中报告的。您可以在此处报告您喜欢的内容。我保持简单，显示累积的行数。通过添加批处理计数器，还可以显示已完成的批处理数。

通过将外部变量allowBatch设置为 false 来实现取消。将继续找到当前请求的批次，但将撤回检索更多批次的权限。

为了更好地衡量，在过程的开始和结束时启用/禁用或显示/隐藏各种 DOM 元素。如果不需要，可以省略。

var oTable;
$(document).ready(function() {
    window.prettyPrint() && prettyPrint();
    var aColumns = [], 
        columns = [],
        rows = [],
        $progress = $("#progress"),
        allowBatch;
    function getBatch(options) {
        return $.post("ajax.php", options, 'json').then(function(data) {
            var promise;
            if(allowBatch && data && data.length) {
                $progress.text(makeRows(data));
                options.start += batchsize;
                promise = getBatch(options);
            } else {
                promise = $.when(showData());
            }
            return promise;
        });
    }
    function makeRows(data) {
        var keycolumns, i, j;
        if(aColumns.length == 0) {
            keycolumns = Object.keys(data[0]);
            for(j = 0; j < keycolumns.length; j++) {
                if($.inArray(keycolumns[j], aColumns.sTitle) <= 0) {
                    aColumns.push({sTitle: keycolumns[j]});
                    columns.push(keycolumns[j]);
                }
            }
        }
        for(i = 0; i < data.length; i++) {
            rows.push( columns.map(function(col) {
                return data[i][col];
            }) );
        }
        return rows.length;
    }
    function showData() {
        var oTable = $('#jsontable').dataTable({
            'columns': aColumns,
            'sDom': 'T<"clear">lfrtip',
            'oTableTools': {
                "aButtons": [{
                    "sExtends": "csv",
                    "sButtonText": "CSV"
                }]
            }
        });
        oTable.fnClearTable();
        $.each(rows, function(row) {
            oTable.fnAddData(row);
        });
        return oTable;
    }
    $('#load').on('click', function(e) {
        e.preventDefault();
        var $load = $(this).attr('disabled', true),
            $cancel = $("#cancel").show();
        $progress.text('').show();
        aColumns.length = columns.length = rows.length = 0;
        allowBatch = true;
        getBatch({
            'version': $('#drp_v').val(),
            'category': $('#drp_ctg').val(),
            'country': $('#drp_cnt').val(),
            'network_id': $('#drp_nt').val(),
            'api': $('#drp_api').val(),
            'func': 'show_datatable',
            'start': 0,
            'batchsize': 100
        }).then(function(oTable) {
            // ... all done
            $load.attr('disabled', false);
            $cancel.hide();
            $progress.hide();
        });
    });
    $("#cancel").on('click', function(e) {
        e.preventDefault();
        allowBatch = false;
    }).hide();
    $("#progress").hide();
});

仅针对解析错误进行测试，因此可能需要调试

您仍然需要修改服务器端脚本以接受两个附加参数 start 和 batchsize并相应地编写其 SQL。这应该是相当微不足道的。

我最不确定的部分是makeRows()，我稍微挣扎了一下。如果没有任何效果，请先查看那里。