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

解决方案是使用名为variable的{{1}}来验证是否已发送wasSubmitted请求。

ajax

Answer 2

我认为简单的preventDefault就足够了

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

    $.ajax(..)

Answer 3

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

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

防止双提交表格

3 个答案: