JQuery的。对表中每一行的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请求都是一次发送的，但我需要在请求之间暂停。

P.S。关于标签中的属性“id”：我应该使用它来“引导X编辑器”

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

Answer 2

看起来您只需要在el附近创建一个闭包：

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

这将为每个请求创建el的单独副本，因此每个响应都将更新其相应的元素。

（注意：如果你真的想在每个请求之间暂停，可以使用$.ajax的{​​{1}}选项，但我不明白你为什么要这样做。）< / p>

Answer 3

他们的AJAX请求是异步的，因此只要一个AJAX请求被触发，下一个each()迭代就会启动，这样你就可能有多个并行请求到AJAX端点。如果要阻止请求，可以在配置中使请求异步。这将使他们连续运作。

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