javascript - 将返回 5000 行的 AJAX 调用拆分为多个 100 行的 AJAX 调用

Question

我有一个ajax调用，我正在将返回的数据加载到数据表中

这是我的 jquery ajax 调用

<script type="text/javascript">
var oTable;
$(document).ready(function() {
    window.prettyPrint() && prettyPrint();


    $('#load').click(function()
    {
        var v = $('#drp_v').val();
        var cnt = $('#drp_cnt').val();
        var ctg = $('#drp_ctg').val();
        var api = $('#drp_api').val();
        var nt = $('#drp_nt').val();
        $.post("ajax.php",
            {   'version':v,'category':ctg,
                'country':cnt,'network_id':nt,
                'api':api,'func':'show_datatable'},
                        function(data)
                        {
                            var aColumns = [];
                            var columns = [];
                            for(var i = 0; i < data.length; i++) 
                            {
                                if(i>0)
                                    break;
                                keycolumns = Object.keys(data[i]); 
                                for(j = 0; j < keycolumns.length; j++)
                                {
                                    if($.inArray(keycolumns[j],aColumns.sTitle)<=0)
                                    {
                                        aColumns.push({sTitle: keycolumns[j]}) //Checks if
                                        columns.push(keycolumns[j]) //Checks if
                                    }                                  
                                }

                            }

                            var oTable = $('#jsontable').dataTable({
                                "columns":aColumns,
                                "sDom": 'T<"clear">lfrtip',
                                    "oTableTools": {
                                        "aButtons": [
                                            {
                                                    "sExtends": "csv",
                                                    "sButtonText": "CSV",
                                             }
                                        ]
                                    }
                            });
                            oTable.fnClearTable();
                            var row = []
                            for(var i = 0; i < data.length; i++) 
                            {
                                for(var c = 0; c < columns.length; c++) 
                                {
                                        row.push( data[i][columns[c]] ) ;
                                }
                                oTable.fnAddData(row);
                                row = [];
                            }
                        },'json');
    });
});
</script>

这是我的 php 函数

function show_datatable($version,$ctg,$cnt,$nt,$api)
{
    $cnt_table = "aw_countries_".$version;
    $ctg_table = "aw_categories_".$version;
    $off_table = "aw_offers_".$version;


    $sizeof_ctg = count($ctg);
    $cond_ctg = " ( ";
    for($c = 0; $c < $sizeof_ctg ; $c++)
    {
        $cond_ctg = $cond_ctg." $ctg_table.category = '".$ctg[$c]."' ";
        if($c < intval($sizeof_ctg-1))
            $cond_ctg = $cond_ctg." OR ";
        else if($c == intval($sizeof_ctg-1))
            $cond_ctg = $cond_ctg." ) ";
    }

    $sizeof_cnt = count($cnt);
    $cond_cnt = " ( ";
    for($cn = 0; $cn < $sizeof_cnt ; $cn++)
    {
        $cond_cnt = $cond_cnt." $cnt_table.country = '".$cnt[$cn]."' ";
        if($cn < intval($sizeof_cnt-1))
            $cond_cnt = $cond_cnt." OR ";
        else if($cn == intval($sizeof_cnt-1))
            $cond_cnt = $cond_cnt." ) ";
    }

    $sizeof_nt = count($nt);
    $cond_nt = " ( ";
    for($n = 0; $n < $sizeof_nt ; $n++)
    {
        $cond_nt = $cond_nt." $off_table.network_id = '".$nt[$n]."' ";
        if($n < intval($sizeof_nt-1))
            $cond_nt = $cond_nt." OR ";
        else if($n == intval($sizeof_nt-1))
            $cond_nt = $cond_nt." ) ";
    }

    $sizeof_api = count($api);
    $cond_api = " ( ";
    for($a = 0; $a < $sizeof_api ; $a++)
    {
        $cond_api = $cond_api." $off_table.api_key = '".$api[$a]."' ";
        if($a < intval($sizeof_api-1))
            $cond_api = $cond_api." OR ";
        else if($a == intval($sizeof_api-1))
            $cond_api = $cond_api." ) ";
    }

    $output         = "";

    $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;

    $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;
}

现在，我想修改这段代码。假设我想像这样工作:

我将调用 v，AJAX 将向我发送一次 100 行，然后再次发送 100 行，然后再次发送 100 行。

我的意思是拆分 AJAX 调用以逐个返回所有数据 block 。比如说 AJAX 会被多次调用，每次都会向我发送 100 block 数据。

工作正在进行时，将会出现一个带有取消按钮的进度条。

如果我点击取消按钮，那么如果调用了3次AJAX函数，它将显示300条数据，然后AJAX将停止。数据库仅显示 300 条数据。

Answer 1

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'
    )       
}

AJAX.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);        
}