触发event.preventDefault（）; 仅在满足条件的情况下-jQuery / javascript

Question

我要做的就是在提交数据库之前，检查数据库中是否还没有某些表单中的值（名称，电子邮件）。

我有一个运行良好的php脚本，并返回与问题相对应的字符串，如果没有问题，则返回“无输出”。

我唯一的问题是event.preventDefault（），仅当php脚本返回“无输出”以外的内容时才应调用。 当它在get（）调用中时它不起作用，并且我尝试使用if语句来确定错误div是否为空，但是它也不起作用。

$(document).ready(function() {
$( "#signupForm" ).submit(function( event ) {
    $.get( "signupchecker.php", { name: $('#name').val(), email: $('#email').val() } ).done(function ( data ) {
        if( data != "no output" ) {
            $( "#error" ).text( data );
        }
    });
    event.preventDefault();
});

}）;

谢谢！

Answer 1

我唯一的问题是event.preventDefault（），仅当php脚本返回“无输出”以外的内容时才应调用。

您不能以这种方式合理地做到这一点。 您必须使用同步ajax请求，在执行网络操作时锁定浏览器的UI，而这可能是非常差的UX。 （并且最终将不再受jQuery支持。）

相反，总是阻止默认，如果PHP脚本返回一个值话说形式允许被提交，呼吁submit的DOMFormElement （直接，而不是通过jQuery）。 这将提交表单，而无需再次运行submit事件处理程序。

例如，如下所示：

$(document).ready(function() {
    $("#signupForm").submit(function(event) {
        var thisForm = this;                // Remember the raw form element
        $.get("signupchecker.php", {
            name: $('#name').val(),
            email: $('#email').val()
        }).done(function(data) {
            if (data != "no output") {
                $("#error").text(data);
            } else {
                thisForm.submit();          // Submit form w/o calling submit event handlers again
            }
        });
        event.preventDefault();             // Always do this
    });
});

请注意，由于这意味着您仅作为用户发起的操作的间接结果提交表单，因此，如果将表单的target设置为打开新窗口，则可能会遇到弹出窗口阻止程序。 （您也可能不是。:-)浏览器可以看到XHR是由用户事件启动的，并且表单提交是在该XHR完成时完成的，因此它可以确定这是可以的...）