如何只提交一次jquery ajax post请求？

Question

我正在使用jquery ajax post请求检查WordPress中的最终订单。

我的添加到购物车和结帐订单具有相同的代码，但结帐订单代码提交请求3次。

var j = jQuery.noConflict();
j('.wc-checkout').on('submit', function(e) {
    e.preventDefault();

    var billing_customer_type = j("#billing_customer_type").val();
    // .. and so on...

    j.ajax({
        type: 'POST',
        url: 'http://localhost/mywebsite/?wc-ajax=checkout',
        cache: false,
        data: {
            'billing_customer_type': billing_customer_type,
            // and so on..
        },
        success: function(result) {
            console.log('Order Checked Out');
        },
        error: function(xhr, status, error) {
            console.log(error);
        },
        complete: function() {}
    });
});


<form class="wc-checkout" method="post" enctype="multipart/form-data"
    novalidate="novalidate">
    <div class="form-control">
        <label>Lorem Ipsum: <abbr class="required" title="required">*</abbr></label>
        <select name="billing_customer_type" id="billing_customer_type"
            class="select thwcfd-enhanced-select select2-hidden-accessible enhanced"
            data-placeholder="" tabindex="-1" aria-hidden="true">
            <option value="A" selected="selected">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>

    <div class="form-control">
        <!-- _wpnonce help protect URLs and forms from certain types of misuse -->
        '.wp_nonce_field("ajax_checkout").'
        <input type="submit" value="Order Now" class="epo-proceed-checkout-btn">
    </div>

</form>

你知道我怎样才能让.on只提交一次？ 任何想法都表示赞赏。 谢谢

Answer 1

检查它，但您需要在您的环境中进行测试。

 var isPost = 0; $(document).ready(function() { $("button").click(function() { if (isPost == 0) { $.get("https://stackoverflow.com", function() { console.log('post'); }); isPost = 1; } }); });

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> </script> </head> <body> <button>Send an HTTP GET request to a page and get the result back</button> </body> </html>

Answer 2

我通过添加stopImmediatePropagation();解决了这个问题stopImmediatePropagation(); 并return false;

更新的代码：

  j('.wc-checkout').on('submit', function(evt) {
    evt.preventDefault();

    var billing_customer_type = j("#billing_customer_type").val();
    // and so on...

    j.ajax({
      type: 'POST',
      url: 'http://localhost/mywebsite/?wc-ajax=checkout',
      cache: false,
      data: {
        'billing_customer_type':billing_customer_type,
        // and so on...
      },
      success: function (result) {
        console.log('Order Checked Out');
      },
      error: function(xhr,status,error) {
        console.log(error);
      },
      complete:function(){
      }
    });
    evt.stopImmediatePropagation(); // to prevent more than once submission
    return false; 


  });

如何只提交一次jquery ajax post请求？

问题描述

2 个解决方案

解决方案1
1 2018-07-15 14:01:25

解决方案2
0 已采纳 2018-07-16 05:12:50

如何只提交一次jquery ajax post请求？

问题描述

2 个解决方案

解决方案1 1 2018-07-15 14:01:25

解决方案2 0 已采纳 2018-07-16 05:12:50

解决方案1
1 2018-07-15 14:01:25

解决方案2
0 已采纳 2018-07-16 05:12:50