为什么在 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 调用来做到这一点，节省资源，减少错误和调试等。