Question

所以，我有这个提交处理程序。当请求发出时，我已经将表单配置为指向多部分资源URL（它指的是一个对象和一个子对象，每个对象都有指定的ID，作为路径的一部分）。每当我提交表单时，它不仅会提交预期的请求，还会发出第二个请求，其中包含从请求URL中删除的子对象的ID和名称。

TL; DR：它向/foo/1/bar/2发出请求，然后/foo/1，我需要它停止发出第二个请求。

我已使用标准event.preventDefault()并在return false中投放以获得良好衡量标准。在这里没有看到，但我也尝试了$form.submit(false)，因为我在某个地方看到了另一个SO答案，但是因为它看起来很糟糕并且无论如何也没有用。

function submitForm(e) {
    e.preventDefault();

    var $form = $(e.target);

    $form.find('[type="submit"], [type="button"]').prop('disabled', true);

    var formData = {
        // data
    };

    $.ajax({
        url: $form.prop('action'),
        method: ($form.find('[name="_method"]').val() || $form.prop('method')),
        data: formData,
        error: function(response, status) {
            console.log(response);
        },
        success: function(response, status) {
            console.log(response);
        },
        complete: function() {
            $form.find('[type="submit"], [type="button"]').prop('disabled', false);
        }
    });

    return false;
}

$(document).ready(function(){
    $('#myform').on('submit', submitForm);
});

我确定在AJAX调用的某处出现问题，因为删除它会导致表单提交按预期停止。我想AJAX调用本身也可能实际上发出了两个请求，但是对我来说没有意义，为什么会这样做。用户按下回车键或主动点击提交按钮似乎也会发生。

Answer 1

我没有仔细查看我收到的回复，因为我对看到两个传出的HTTP请求的事实非常感兴趣。

第一个请求返回时带有3xx状态代码，因此jQuery正在运行第二个查询到第一个响应中重定向到的URL。

我使用的服务控制器没有正确处理AJAX请求，因此在修改控制器以向AJAX请求发送不同的响应时，我不再遇到问题。

Answer 2

您有可能两次订阅提交请求，因此双重触发事件。尝试确保在绑定之前先取消绑定：

$(document).ready(function(){
    $('#myform').off('submit').on('submit', submitForm);
});

有些人说你应该使用unbind / bind作为良好的做法。这是相同的，但使用off代替unbind。

也可能是您已将脚本两次包含在您的网页中......请检查一下！

jQuery - AJAX表单双提交

2 个答案: