使用 jQuery 拦截表单提交答案

【问题标题】：intercept form submit with jQuery使用 jQuery 拦截表单提交
【发布时间】：2013-01-30 16:06:41
【问题描述】：

我想通过 jQuery 拦截提交并首先检查服务器上是否存在文件。如果存在则继续请求，如果不存在则显示消息并且不发送请求。这就是我所拥有的：

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

    checkIndex('upload/segments.gen').done(function() {
        return true;
    }).fail(function () {
        e.preventDefault();
        alert("No index present!");
        return false;
    });
});

这是checkIndex()：

function checkIndex(file){
    return $.ajax({
        url : file,
        type:'HEAD'
    });
}

发生的情况是：文件存在于服务器上，但 checkIndex 返回失败。首先我看到警报弹出窗口，然后它继续并将发布请求发送到服务器。

我将checkIndex() 用于其他目的以及它按预期工作的地方，所以我很确定错误在提交例程中的某个地方。但我不知道它有什么问题。

【问题讨论】：

不幸的是，这只适用于同步 AJAX 请求。您应该禁用该按钮并在 done 回调中启用它

标签： javascript jquery

【解决方案1】：

您不能从回调中返回到异步方法（例如 ajax）。相反，请阻止所有提交，然后在您准备好时提交。

$("#methodForm").submit(function(e){
    e.preventDefault();
    var form = this;
    checkIndex('upload/segments.gen').done(function() {
        form.submit(); // submit bypassing the jQuery bound event
    }).fail(function () {
        alert("No index present!");
    });
});

【讨论】：

这对我不起作用。我得到“TypeError: form.submit is not a function”，如果我使用 $(form).submit() 它一遍又一遍地调用提交处理程序。
你有一个带有id="submit"的元素，把它改成别的。
我有一个类似的问题，但有一个进一步的转折：显示一个对话框，显示要覆盖的图像。单击“确认”按钮（<a> 元素）将提交表单。我必须确保在处理该点击事件时添加e.preventDefault()，否则我的请求将被阻止。

【解决方案2】：

其实不是这样工作的，checkIndex 是异步的，所以当它返回任何东西时，表单已经提交，并且返回语句也在不同的范围内，试试这样的：

$("#methodForm").submit(function(e){
    e.preventDefault(); //prevent submit
    var self = this;
    checkIndex('upload/segments.gen').done(function() {
        self.submit(); //submit if ajax OK
    }).fail(function () {
        alert("No index present!");
   });
});

【讨论】：

@KevinB - 是的，改了！