Question

我正在使用jquery ajax发布请求检查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();和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发布请求？

2 个答案: