1

do whileループ内で複数の投稿を送信しようとしていますが、結果が追加されません

<script type="text/javascript">
function action() {
    var initval = 1;
    var endval = 5;
    do {
    var action_string = 'txtuser=someone';

    $.ajax({
                    type: "POST",
                    url: "http://localhost/js.php",
                    data: action_string,
                    success: function(result){
                       $('div#append_result').append(initval + ',<br/>');
                     }  
                });
    initval++;
     } while (initval <= endval);
  }
</script>

出力は次のとおりです：5、5、5、5、5、

出力は1、2、3、4、5である必要があります

4

3 に答える 3

6

AJAX の非同期の性質により、結果の AJAX 要求のいずれかに対して成功関数が実行されるまでに、ループが完了し、 5 に設定されます。各要求の開始時にinitval状態をキャプチャし、キャプチャしたものを使用する必要があります。メソッドinitvalの状態success()。値を閉じるのが最も簡単な方法です。

function action() {
    var initval = 1;
    var endval = 5;
    do {
        var action_string = 'txtuser=someone';

        ( function( captured_initval ){
            $.ajax({
                type: "POST",
                url: "http://localhost/js.php",
                data: action_string,
                success: function(result){
                    $('div#append_result').append(captured_initval + ',<br/>');
                }  
            });
        }( initval ) );

        initval++;
    } while (initval <= endval);
}

ただし、サーバーで 1 つまたは複数の要求がハングアップして、後の要求が最初に完了する可能性があることを理解し1, 2, 5, 3, 4てください。

また、要素の ID を使用すると、要素のタグ名をハッシュ セレクタの前に付けるよりもはるかに高速です。さらに、成功が実行されるたびに、結果の DIV に対して DOM を再クエリすることは避ける必要があります。一度取得して、必要なときに使用します。

function action() {
    var initval = 1;
    var endval = 5;
    do {
        var action_string = 'txtuser=someone',
            $AppendResult = $('#append_result');

        ( function( captured_initval ){
            $.ajax({
                type: "POST",
                url: "http://localhost/js.php",
                data: action_string,
                success: function(result){
                    $AppendResult.append(captured_initval + ',<br/>');
                }  
            });
        }( initval ) );

        initval++;
    } while (initval <= endval);
}
于 2011-08-05T03:56:54.827 に答える
3

Ajax リクエストは非同期です。つまり、成功ハンドラーが戻るまでに、ループは既に完了しています。代わりに、クロージャーを作成して値を保持できます。

success: (function(i){
    return function() {
         $('div#append_result').append(i + ',<br/>');
    }
})(initval)
于 2011-08-05T03:58:03.277 に答える
2

This is because of the async behavior of ajax: Here is a modified version:

var initval = 1;
var endval = 5;
function action(){
    var action_string = 'txtuser=someone';
    $.ajax({
        type: "POST",
        url: "http://localhost/js.php",
        data: action_string,
        success: function(result){
           $('div#append_result').append(initval + ',<br/>');
           initval++;
           if(initval<=endval)
            action();
        }  
    });
 }

This is now somewhat a sequential approach. Note: I assumed every ajax request returns success, if there is an error, you should handle them on the error callback.

于 2011-08-05T04:00:56.393 に答える