如何只提交一次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