3

我尝试对表中的每一行执行 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>

阿贾克斯请求

$("#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”

4

3 回答 3

5

问题是 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

于 2013-07-11T00:08:10.243 回答
3

看起来你只需要在周围创建一个闭包el：

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

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

（注意：如果您真的想在每个请求之间暂停，可以使用$.ajax'async: false选项，但我不明白您为什么要这样做。）

于 2013-07-11T00:07:59.663 回答
1

它们的 AJAX 请求是异步的，因此一旦一个 AJAX 请求被触发，下each()一次迭代就会开始，这样您可能会对 AJAX 端点有许多并行请求。如果您希望它们阻塞，您可以在配置中使请求异步。这将使它们连续运行。

        $.ajax({
            async: false,
            url: 'wordstat/ajax?query='+query+'&page='+page,
            success: function(data){
                $(el).children('.editable').children('.relevantnost').html(data)
            }
        });
于 2013-07-11T00:18:02.367 回答