Question

我遇到了一个似乎很容易解决的问题，但我没想到。我有3个radio，每个人都有所选付款方式的数据属性，但问题是，在jQuery代码中，我需要根据所选的广播switch提交一个AJAX请求。但如果我点击第一个收音机，给第三个收音机，我会收到2个POST请求。对于第一个无线电和第三个，应该是1. o.O

$("#payment-form input[name=payment_option]").change(function() {
var payment_method = $("input[name=payment_option]:checked").data('payment-method');

$("#checkout-button").prop('disabled', false);
console.log(payment_method);
switch (payment_method) {

    // First radio
    case 'pagseguro':
        $("#paypal-button").css('display', 'none');
        $("#checkout-button").css('display', 'block');
        $("#checkout-button").prop('disabled', false);

        $checkout_button.click(function() {
            $.ajax({
                url: 'http://usercp.dev/doacao/fazer-doacao/pagamento/pagseguro',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        var code = response.transaction_code
                        PagSeguroLightbox({
                            code: code
                        }, {
                            success: function(transactionCode) {
                                $.post("http://usercp.dev/doacao/fazer-doacao/pagamento/received", {
                                        payment_token: response.payment_token,
                                        payment_method: response.payment_method,
                                        transaction_code: transactionCode,
                                        transaction_done: response.success,
                                        csrf_token: $('meta[name="csrf-token"]').attr('content')
                                    })
                                    .done(function(response) {
                                        if (!response.success) {
                                            toastr.error("Oops!", response.error)
                                        }
                                        window.location.replace(response.redirect);
                                    }, 'json');
                            },
                            abort: function() {
                                toastr.options.positionClass = 'toast-top-center';
                                toastr.info("Você cancelou a operação de pagamento.");
                                $(".loader").addClass('hidden');
                            }
                        });
                    } else {
                        toastr.options.positionClass = 'toast-top-center';
                        toastr.error(response.error);
                        if (response.redirect !== "") {
                            window.location.replace(response.redirect);
                        }
                    }
                }
            });
            $(".loader").removeClass('hidden');
            $("#checkout-button").prop('disabled', true);
            $("#checkout-button").html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>');
        });

        break;

    // PayPal have their one button, so work without errors.
    case 'paypal':
        $("#paypal-button").css('display', 'block');
        $("#checkout-button").css('display', 'none');
        break;

    // PicPay I try to use the same button as PagSeguro (first radio) 
    // but as I mentioned above, 
    // If selected PagSeguro first and jump to PicPay I'll see to post requests (one for PagSeguro and another for PicPay). I want to fix this.
    case 'picpay':
        $("#paypal-button").css('display', 'none');
        $("#checkout-button").css('display', 'block');
        $("#checkout-button").prop('disabled', false);
        $checkout_button.click(function() {
            $.ajax({
                url: 'http://usercp.dev/doacao/fazer-doacao/pagamento/picpay',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (!response.success) {
                        toastr.error("Oops!", response.error)
                    }
                    window.location.replace(response.redirect);
                }
            });
            $(".loader").removeClass('hidden');
            $("#checkout-button").prop('disabled', true);
            $("#checkout-button").html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>');
        });
        break;
}

   });

HTML很简单。

<input type="radio" class="radio" name="payment_option" id="payment_option" data-payment-method="pagseguro">

<input type="radio" class="radio" name="payment_option" id="payment_option" data-payment-method="paypal">

<input type="radio" class="radio" name="payment_option" id="payment_option" data-payment-method="picpay">

Answer 1

所以你有两个按钮可以触发每个不同的ajax请求，你希望能够触发ajax A，然后触发ajax B并取消ajax A.

首先，您必须了解Ajax是异步的。这意味着当ajax启动时，它会触发与主线程分开的操作线程，其中存在所有javascript。

如果要在触发B时取消A，或在触发A时取消B，则需要跟踪ajax请求。

我能想象的最简单的方法是将你的ajax放在变量

中

var currentAjax = $.ajax(/* Ajax A */)

然后当你触发一个新的ajax时，你可以做这样的事情来摆脱前一个

if (currentAjax) { currentAjax.abort() }

currentAjax = $.ajax(/* the new ajax you selected */)

总结得更好

我们有一个变量（它可能是全局的，为了简单起见），它包含最后激活的ajax

var currentPayAjax;

$checkout_button.click(function() {

    // an inefficient but doable way to try and cancel any potential previous get      
    try { currentPayAjax.abort() } catch(err){}

    switch (payment_method) {    
        case 'pagseguro':

        currentPayAjax = $.ajax({/* stuff A */})

        break;
        case 'picpay':

        currentPayAjax = $.ajax({/* stuff B */})

        break;
    }
)}

jQuery更改重复操作

1 个答案: