Question

我正在使用jquery 1.11.2，我正在尝试进行ajax异步调用因为我正在验证表格。

这是我的代码

    <form name="form1" id="form1" method="post" action="/payment/payment.php" 
onsubmit="return validateForm();">
    </form>

function validateForm()
{
        data = $('form#form1').serialize(); 

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/validate.php",
            data: data,
            async: false,
            ,success: function (j) {                
                if(j.error)
                { 
                    form_valid=false;
                }

                if(j.success)
                {
                    form_valid=true;
                }       

            }//success                      
        });//ajax


    if(!form_valid){
        return false;
    }
    return true;

}

并且因为不推荐使用async：false，所以函数首先返回并获取ajax响应。

jquery说： “从jQuery 1.8开始，不推荐使用async：false和jqXHR（$ .Deferred）;必须使用success / error / complete回调选项而不是jqXHR对象的相应方法，如jqXHR.done（）或不推荐使用的jqXHR.success（）。“

但我不知道如何做到这一点，搜索了所有，但我没有找到任何解决方案

如何让它异步或编写任何其他方法来实际解决我的问题

谢谢

Answer 1

您最好的选择是使用异步请求并防止提交FORM的默认行为。然后，完成异步请求后，手动提交FORM。

HTML：

<form name="form1" id="form1" method="post" action="/payment/payment.php">...</form>

JS / jQuery的：

$('#form1').on('submit', function(e){ // could have been to be wrapped in document ready handler or delegate event
    e.preventDefault(); // prevent FORM to be submitted
    $(this).find(':submit').prop('disabled', true);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "/validate.php",
        data: $(this).serialize(),
        context: this, // set context relative to the FORM
        success: function (j) {
            if (j.success) {
                this.submit(); // submit the FORM
            }
        }                      
    }).always(function(){$(this).find(':submit').prop('disabled', false);}); 
});

Answer 2

解决方案是禁用您的表单，直到您收到来自您的ajax请求的响应。然后采取行动。

即

function validateForm()
{
        data = $('form#form1').serialize(); 
        disableForm(true)

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/validate.php",
            data: data,
            async: false,
            ,success: function (j) {                
                if(j.error)
                { 
                    form_valid=false;
                    //Do something that you would do if the form was not valid
                }

                if(j.success)
                {
                    form_valid=true;
                    //Do something that you could do if the form is valid
                }       

                disableForm(false)
            }//success,
           failure: function(e){
                //Show an error
                disableForm(false)
           }
        });//ajax    
}

function disableForm(bool){
    //Put some code here to disable the form.
    //You could use an overlay, or just simply disable the form controls
}

jquery ajax异步调用已弃用

2 个答案: