查询。表中每一行的 Ajax 请求

Question

我尝试对表中的每一行执行 Ajax 请求，但无法达到预期的结果

桌子：

<table>
        <tr class="data">
            <td class="editable">
                <a class="refresh btn btn-large" class="page">
                    Col one
                </a>
            </td>
            <td class="editable">
                <a href="#" data-pk="10" id="query" class="query">
                    Col two
                </a>
            </td>
        </tr>
        <tr class="data">
            <td class="editable">
                <a class="refresh btn btn-large" class="page">
                    Col one 1
                </a>
            </td>
            <td class="editable">
                <a href="#" data-pk="10" id="query" class="query">
                    Col two 1
                </a>
            </td>
        </tr>
</table>

Ajax 请求

$("#detect_rel").click(function(){
    $('.data').each(function(i, el) {
         var query   = $(el).children('.editable').children('.query').text();
        var page    = $(el).children('.editable').children('.page').text();

        $.ajax({
            url: 'wordstat/ajax?query='+query+'&page='+page,
            success: function(data){
                $(el).children('.editable').children('.relevantnost').html(data)
            }
        });
    });
});

我的问题：所有 ajax 请求都是一次性发送的，但我需要在请求之间暂停。

Ps 关于标签中的属性“id”：我应该使用它因为“Bootstrap X Editor”

Answer 1

问题在于 AJAX 请求是异步的，因此如果您在 .each() 中执行所有这些请求，则不会有暂停。

您需要的是首先获取每个el元素并将它们放入数组中。然后创建一个全局变量，作为您的计数器，以了解已发送了多少请求。

您发送第一个请求，然后在第一个的成功函数中发送第二个，依此类推。

您需要从本质上重写，以便在前一个完成时发送请求。

例子：

function test()
{
    var arr = new Array();
    var counter = 0;

    $('.data').each(function(i, el) {
        arr.push(el);       
    });

    doRequest(counter);

    function doRequest(counter)
    {
        var query   = $(arr[counter]).children('.editable').children('.query').text();
        var page    = $(arr[counter]).children('.editable').children('.page').text();

        $.ajax({
            url: 'http://www.google.com?'+query+'&page='+page,
            success: function(data){
                alert("made request with query="+ query);   
                counter++;
                if(counter<arr.length)
                doRequest(counter);
            }
        });
    }

}

编辑：

正如我从其他答案中看到的那样，您可以只包含async: false,使请求异步的内容。

与此类似的方法仅适用于async:false不受支持或由于阻止浏览器而不可取的情况...

跨域请求和 dataType: "jsonp" 请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

来自：http : //api.jquery.com/jQuery.ajax/#jQuery-ajax-settings