Question

我正在建造一个游戏。当一个部分被移动时（＆＃39; .draggable＆＃39;），我需要进行第一次ajax调用（to move_script.php），它将验证移动然后将其保存在数据库中。完成后，我想运行第二个ajax调用（到past_moves.php）并查询数据库并写出新的移动。我的问题是，有时第二个ajax调用会在当前移动之前拉出结果。我使用了microtime（）;在PHP代码中查看正在发生的事情，并且每次最新结果都没有被提取时，第二个ajax脚本首先完成。（大多数时候最近的结果出来了，但它经常会赢得，它似乎是随机的，每5到15次左右）。如何确保第二个ajax调用在第一个调用完成之前一直运行？

谢谢

代码：

<script>
            $(function() {

              $( ".draggable" ).draggable({ 

                  stop: function(event, ui) {
                      var start = $(this).attr('id')

                      //ajax call number 1
                      $.ajax({
                          type: "POST",
                          url: "../move_script.php",
                          data: { start: start }
                        }).done(function( msg ) {
                          //alert( "Data Saved: " + msg );
                          $("#chessboard").html(msg);
                        }); 

                 //ajax call number 2   
                 $.ajax({
                   type: "POST",
                   url: "../past_moves.php",
                       data: {}
                     }).done(function( moves ) {
                   $("#past_moves").html( moves );
                     });
                   }
              });
        });
        </script>

Answer 1

嵌套ajax调用

//ajax call number 1
$.ajax({
    type: "POST",
    url: "../move_script.php",
    data: { start: start }
}).done(function( msg ) {
    //alert( "Data Saved: " + msg );
    $("#chessboard").html(msg);
    //ajax call number 2   
    $.ajax({
        type: "POST",
        url: "../past_moves.php",
            data: {}
        }).done(function( moves ) {
            $("#past_moves").html( moves );
        });
    });
});

此嵌套将强制第二个调用等待第一个调用完成。

Answer 2

将第二个ajax调用放在第一个ajax调用的回调中，以确保它仅在完成后执行。否则，由于ajax是异步的，它会启动请求然后继续（在这种情况下，启动第二个ajax）。我不熟悉“完成”方法 - 也许你可以把它放在你已经拥有的那个功能中。否则，这是我熟悉的语法：

$.ajax({
    type: "POST",
    url: "../move_script.php",
    data: { start: start },
    success: function(data){
        //data is whatever the ajax returns.  is it msg in this case?
        //put second ajax call here
    },
    error: function(jqXHR, textStatus, errorThrown){
        //might not need here, but this is example of callback which will be executed instead of success if server returns an error
    },
    complete: function(jqXHR, textStatus){
        //another useful callback to know about - will execute after success or error
    }
})

https://api.jquery.com/jQuery.ajax/

让javascript线性执行

2 个答案: