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

Question

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

3

我正在使用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提交只执行一次吗？任何想法都很受欢迎。谢谢。

- redshot

你可以在成功的请求中设置一个变量，并从下一个请求开始将其设置为“return false”。 - Rohit.007

你想要禁止按钮被多次点击吗？ - Chayim Friedman

你能分享一下带有最小可行的JS的HTML部分吗？ - Rohit.007

我已经更新了HTML。 - redshot

@DavidJawHpan，我现在已经解决了这个问题。你可以在下面查看我的答案。 - redshot

显示剩余3条评论

2个回答

3

我通过添加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; 


  });

- redshot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rohit.007 · Accepted Answer

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

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>