javascript - 防止重复提交表单

Question

我有一个带有提交按钮的表单。如果我单击此提交按钮，则 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);
        }
    });

});

网页还将加载并转到另一个页面。加载时，用户可以多次单击“提交”按钮，如果他这样做，则将多次向 Web 服务发送 AJAX 帖子。

我尝试使用此代码来解决此问题，但它不起作用:

// 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();

知道为什么不能防止重复发帖吗？

Answer 1

解决方案是使用名为 wasSubscribed 的变量来验证 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;
});