表单OnSubmit等待jQuery Ajax返回?

时间:2013-01-26 20:36:07

标签: jquery ajax asynchronous return onsubmit

我希望仅在Ajax返回有效之后才在$.ajaxonsubmit上触发return true

例如:

<form id="myForm" onsubmit="return ajaxValidation();">
    <input id="myString" name="myString" type="text" />
    <input type="submit" value="Submit" />
</form>

在Javascript中:

function ajaxValidation() {
    $.ajax({
        async: false,
        type: "POST",
        url: "ajax.php",
        data: { myString: $("#myString").val() }
    }).success(function( response ) {
        alert(response); //Got 'ok'
        if (response=="ok") {
            return true; //mark-1
        } else {
            alert("Oh, string is wrong. Form Submit is cancelled.");
        }
    });
    return false; //mark-2
}

当我提交时,我收到警报ok,但它返回'false',因为它跳转到最终return false行。

为什么呢?我不明白。实际上,它应该达到return true行。 (而且,即使在return true之后,函数应该停在那里并且刚刚出来)

现在它意味着,Ajax Return的父函数does NOT wait。相反,它一直持续到最后。请知道原因。如何让父函数等待Ajax?

2 个答案:

答案 0 :(得分:4)

由于AJAX是异步的,因此使用提交按钮上的单击处理程序可以更好地验证。

以下内容基于删除内联onSubmit

$(function() {

    var $form = $('#myForm');

    $form.find('input[type="submit"]').click(function() {
        $.ajax({
           /* async: false,  this is deprecated*/
            type: "POST",
            url: "ajax.php",
            data: {
                myString: $("#myString").val()
            }
        }).success(function(response) {
            alert(response); //Got 'ok'
            if(response == "ok") {
             /*  submit the form*/
                $form.submit();
            } else {
                alert("Oh, string is wrong. Form Submit is cancelled.");
            }
        }); /* prevent default when submit button clicked*/
        return false;

    });
});

答案 1 :(得分:0)

标记1处的返回值是您的ajax请求的成功函数,而不是您的验证函数。因此,即使它返回,它也只从那里返回,而不是从标记2的验证功能

返回