為什么在 jquery ajax 調用的完整 function 中我的響應數據為空？

Question

我有一個 function 在切換單選按鈕時會觸發兩個 ajax 調用。 兩個調用都返回一個價格並將其放入一個元素中。 問題是當我垃圾郵件單擊單選按鈕時，有時價格彼此不同，但它們應該相同，這意味着 ajax 呼叫彼此不同步。

我嘗試刪除將價格從success的 function 附加到complete的 function 的部分，因此它只會在整個調用完成時添加 PHP 腳本的結果。 但是由於某些原因，當我將它放入complete的 function 中時，它不會是 append 的價格，這是為什么？

我的function：

$('.checkoutwrap input[name=ontwerpcontrole]').on("change", function(e) {
    e.preventDefault();
    var productid = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.productid').val();
    var $pricediv = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.prodinfoprice');
    $.ajax({
        type:'post',
        url:"checkout/ontwerpcontrole.php",
        data:({ontwerp: ontwerp, productid: productid}),
        success:function(data){
        
        },
        complete: function(data) {
            refreshcoupon(true);
        }
      });
    $.ajax({
        type:'post',
        url:"checkout/prices.php",
        data:({productid: productid}),
        success:function(data){

        },
        complete: function(data) {
            $($pricediv).empty().append( data );
        }
    });
});

上面沒有在$pricediv中給出任何價格，但是當我把那部分放在success的 function 中時，如下所示：

$('.checkoutwrap input[name=ontwerpcontrole]').on("change", function(e) {
    e.preventDefault();
    var productid = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.productid').val();
    var $pricediv = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.prodinfoprice');
    $.ajax({
        type:'post',
        url:"checkout/ontwerpcontrole.php",
        data:({ontwerp: ontwerp, productid: productid}),
        success:function(data){
        
        },
        complete: function(data) {
            refreshcoupon(true);
        }
      });
    $.ajax({
        type:'post',
        url:"checkout/prices.php",
        data:({productid: productid}),
        success:function(data){
            $($pricediv).empty().append( data );
        },
        complete: function(data) {
            
        }
    });
});

在第一個 ajax 調用中使用的 function：

function refreshcoupon(force){
  $.ajax({
     type:'post',
     url:"checkout/refreshcoupon.php",
     data:({}),
     success:function(data){
         $( "body #coupon" ).empty().append( data );
     }
 });
}

它工作正常（除了上面提到的，如果你點擊禁食，價格是不一樣的）。 為什么是這樣？

Answer 1

您有幾個同步的和幾個連續的 ajax 調用。 因此，第一個請求可能會在最后一個請求之后完成。 您可能有更多解決方案，但簡單的一個是檢查您的變量productid是否在 ajax success function 中仍然相同：

$('.checkoutwrap input[name=ontwerpcontrole]').on("change", function(e) {
    e.preventDefault();
    var $ontwerp = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.productid');
    var productid = $ontwerp.val();
    var $pricediv = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.prodinfoprice');
    $.ajax({
        type: 'post',
        url: "checkout/ontwerpcontrole.php",
        data: ({
            ontwerp: ontwerp,
            productid: productid
        }),
        success: function(data) {
            if ($ontwerp.val() == productid) {
                refreshcoupon($ontwerp, productid);
            };
        }
    });
    $.ajax({
        type: 'post',
        url: "checkout/prices.php",
        data: ({
            productid: productid
        }),
        success: function(data) {
            if ($ontwerp.val() == productid) {
                $($pricediv).empty().append(data);
            };
        }
    });
});

function refreshcoupon($ontwerp, productid) {
    $.ajax({
        type: 'post',
        url: "checkout/refreshcoupon.php",
        data: ({}),
        success: function(data) {
            if ($ontwerp.val() == productid) {
                $("body #coupon").empty().append(data);
            };
        }
    });
}

無論如何......看看這段代碼看起來不太好。 也許嘗試只用一個 ajax 調用來做到這一點，節省資源，減少錯誤和調試等。