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>

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」のせいで使用する必要があります

4

3 に答える 3

5

問題は、AJAX リクエストが非同期であるため、.each() 内ですべてを実行すると、一時停止が発生しないことです。

必要なのは、最初に各el要素を取得して配列に配置することです。次に、送信されたリクエストの数を知るためのカウンターとなるグローバル変数を作成します。

最初のリクエストを送信してから、最初のリクエストの成功関数で 2 番目のリクエストを送信します。

本質的に書き直す必要があるので、前の作業が終了したときにリクエストが送信されるようにします。

例：

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 に答える