javascript - 如果使用 jquery ajax 验证器返回 true，则提交表单

Question

我不知道我哪里错了。这个想法是，在提交表单之前，输入字段之一通过 ajax 发送到服务器端验证器。如果响应为 1，则输入有效，应提交表单。如果响应为 0，则不应提交表单。问题是我不知道如何在 ajax 请求函数中设置一个变量来阻止提交表单。这就是我所拥有的:

$("#form").submit(function() {
    var valid= false;
    var input = $("#input").val();
    $.ajax({
       type: "POST",
       url: "validator.php",
       data: "input=" + input,
       success: function(msg){
            valid = (msg == 1) ? true : false;
            if(!valid) {
                $("#valid_input").html("Please enter valid info");
            } else {
                $("#valid_input").html("");
            }
       }
     });
    return valid;
 });

Answer 1

问题是 $.ajax 请求是异步的，需要一段时间才能完成。因此，在成功函数事件执行之前，该函数会继续执行并返回 false。

要解决此问题，您可以将 async: false 添加到 AJAX 调用的设置中，但这会暂停执行，直到 AJAX 调用返回。

另一个解决方案是在名为 valid 的表单中创建一个隐藏输入:

<input type="hidden" name="valid" value="false" />

然后在提交函数内但在 ajax 调用之前创建对 from var $form = $(this) 的引用。然后，如果 AJAX 调用返回有效，则更改此隐藏输入的值，并再次提交表单:

$('input[name="valid"]').val('true');
$form.submit();

然后在提交函数结束时，如果隐藏输入的值为 true，则仅返回 false:

if ($('input[name="valid"]').val() == 'false') {
    $.ajax({ ... }); // changes the value of the hidden input from false to true
    return false;
}