Javascript 防止双重提交表格

我有一个表单，它有一个提交按钮。如果单击此提交按钮，JSON将通过AJAX发布到Web服务：

$("#msform").submit(function (e) {

    $.ajax({
        url: 'https://example.com/webservice',
        type: 'POST',
        data: formData1,
        crossDomain: true,
        dataType: 'json',
        jsonpCallback: 'callback',
        success: function (data) {
            console.log(data);
        }
    });

});

该网页也将加载并转到另一页。。加载时，用户可以多次单击Submit按钮，如果他这样做了，那么AJAX帖子将多次发送到Web服务

我尝试使用此代码修复此问题，但它不起作用：

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function () {
    $(this).on('submit', function (e) {
        var $form = $(this);

        if ($form.data('submitted') === true) {
            // Previously submitted - don't submit again
            e.preventDefault();
        } else {
            // Mark it so that the next submit can be ignored
            $form.data('submitted', true);
        }
    });

    // Keep chainability
    return this;
};

$('#msform').preventDoubleSubmission();

---

知道为什么不防止双重发布吗？

解决方案是使用一个名为

wassmitted

的

变量来验证是否已经发送了
ajax
请求

 var wasSubmitted = false;
 $("#msform").submit(function (e) {
    if(!wasSubmitted) {
        wasSubmitted = true;
        $.ajax({
           url: 'https://example.com/webservice',
           type: 'POST',
           data: formData1,
           crossDomain: true,
           dataType: 'json',
           jsonpCallback: 'callback',
           success: function (data) {
             console.log(data);
           }
       });
       return wasSubmitted;
    }
    return false;
});

我认为简单的违约就足够了

$("#msform").submit(function (e) {
    e.preventDefault();

    $.ajax(..)

我首先想到的解决方案是用JS禁用按钮onclick

document.getElementById("btn_id").setAttribute("disabled","disabled");

如果我进入chrome inspect，然后在$（this）上放置一个断点，则不起作用；然后在submit上单击多次，然后它仍然会发送，并且仍然会多次查看提交代码times@bboni是的，对不起。我编辑了我的答案。对于按钮元素，必须使用
.unbind
。我使用了
$（“按钮”）
，但您可以用
选择器替换。假设您有id为btn的按钮，则可以使用此按钮：
$（'#btn'）。取消绑定（'click'）
；它仍然会提交多次：（不确定为什么会进行向下投票。它适用于ajax提交，但不适用于常规表单提交。禁用submit元素？这将防止再次单击它，并向用户显示正在发生的事情。