Javascript：从异步函数返回false

时间：2017-05-09 01:13:31

标签： javascript ajax asynchronous callback return

我试图让这个表单正常工作时遇到了一些麻烦。表格应验证每个字段并在提交前成功收取信用卡。

问题是我无法将返回值传递给父函数以防止表单提交。我读了this post并尝试使用延迟对象，回调函数，并将返回语句放在所有地方，但我遗漏了一些东西。我已经在这里待了大约一个星期，我的挫折感正在逼近。任何人都可以帮我这个吗？我将非常感谢并感谢！

HTML：

<form onSubmit="return billingfunction1();" name="form5" method="post" action="" id="newform">
    </form>

JS :(裁剪到大小）

function billingfunction1() {
var first_name = $.trim($("#first_name").val());
var last_name = $.trim($("#last_name").val());
var cardtype = $.trim($("#cardtype").val());

var maxlen = 16;


var digits = cardnumber.toString().length;
var submiteval;


if (cardtype == '') {
   // alert("Enter Card Type");
    $('#cardtype_msg').html('Enter Card Type.');
   $('#cardtype').css('border','1px solid #28a616');
   $('#cardtype').css('box-shadow','0 0 3px 0 #28a616');
    return false;
} else if (nameoncardfirst == '') {
    //alert("Enter Name On Card");
     $('#nameoncardfirst_msg').html('Enter First Name On Card.');
   $('#nameoncardfirst').css('border','1px solid #28a616');
   $('#nameoncardfirst').css('box-shadow','0 0 3px 0 #28a616');
    return false;
} else if (nameoncardlast == '') {
    //alert("Enter Name On Card");
     $('#nameoncardlast_msg').html('Enter Last Name On Card.');
   $('#nameoncardlast').css('border','1px solid #28a616');
   $('#nameoncardlast').css('box-shadow','0 0 3px 0 #28a616');
    return false;
} else {    
     function foo(callback) {
        return $.ajax({
        url: 'edit_billing2.php',
        data: "nameoncardfirst=" + nameoncardfirst+ "&nameoncardlast=" + nameoncardlast + "&street_address2=" + street_address2 +"&city2=" + city2 +"&state=" + state +"&zip=" + zip + "&cardnumber=" + cardnumber + "&expirationdate=" + expirationdate + "&cvv=" + cvv + "&cardtype=" + cardtype+ "&amount=" + amount + "&gender=" + gender + "&first_name=" + first_name + "&last_name=" + last_name + "&address=" + address + "&address2=" + address2 + "&city=" + city + "&post_code=" + post_code + "&country=" + country + "&mobile=" + mobile + "&email=" + email + "&newsletter=" + newsletter + "&make=" + vehicle + "&model=" + model + "&model_year=" + model_year,

        success: callback                
        });
    }
    function myCallback(response) {
        console.log("Success response. Attempting to authorize payment.");
            //alert(response);
            result = response.split('_');
            //alert("Successfully Saved");
            alert(result[0]);
           if(result[0]=="Your Payment has completed successfully")
           {
            console.log("Payment Success");

            submiteval = true;   
           }
           else
           { 
            console.log("Payment Failed, Aborting form submission.");
            submiteval = false;
           }
            return submiteval;
    }
    console.log("Valid inputs: attempting to pass via AJAX");
    foo(myCallback).done(function(response) {
        return submiteval;
    });
}

修改

我尝试使用event.preventDefault（）来停止提交并手动处理提交，但是然后表单将重新加载当前页面并跳过我之前忽略的表单代码之前的PHP：

if  (isset($_POST[Submit]))
{
//    do registration things
}

我最终将$ _POST [提交]更改为

if  ($_SERVER['REQUEST_METHOD'] == 'POST')
{ 
//    do registration things
}

从我的表单中删除onsubmit属性：

<form name="form5" method="post" action="" id="newform">

并将其移至我的提交按钮：

<input onClick="return billingfunction1();" type="submit" value="Submit" 
name="Submit" class="submit_btn">

我的新回调函数将在成功条件下手动提交表单：

function myCallback(response) {
    console.log("Success response. Attempting to authorize payment.");
    result = response.split('_');
    alert(result[0]);
    if(result[0]=="Your Payment has completed successfully") {
           console.log("Payment Success");
           document.forms["form5"].submit();
    } else { 
        console.log("Payment Failed, Aborting form submission.");
    }
}

一切似乎都在起作用。非常感谢你的帮助！

3 个答案:

答案 0 :(得分：0)

您只需向表单添加提交侦听器

即可

$("#newform").submit(function(){...})

阻止默认操作

event.preventDefault()

手动提交表格

$("#newform").submit()

如果在回复对AJAX调用的响应时满足条件。

答案 1 :(得分：0)

强调文字 

function billingfunction1() {
var first_name = $.trim($("#first_name").val());
var last_name = $.trim($("#last_name").val());
var cardtype = $.trim($("#cardtype").val());

var maxlen = 16;


var digits = cardnumber.toString().length;
var submiteval;


if (cardtype == '') {
   // alert("Enter Card Type");
    $('#cardtype_msg').html('Enter Card Type.');
   $('#cardtype').css('border','1px solid #28a616');
   $('#cardtype').css('box-shadow','0 0 3px 0 #28a616');
    return false; //show error to the user instead of returning false
} else if (nameoncardfirst == '') {
    //alert("Enter Name On Card");
     $('#nameoncardfirst_msg').html('Enter First Name On Card.');
   $('#nameoncardfirst').css('border','1px solid #28a616');
   $('#nameoncardfirst').css('box-shadow','0 0 3px 0 #28a616');
    return false; //show error to the user instead of returning false
} else if (nameoncardlast == '') {
    //alert("Enter Name On Card");
     $('#nameoncardlast_msg').html('Enter Last Name On Card.');
   $('#nameoncardlast').css('border','1px solid #28a616');
   $('#nameoncardlast').css('box-shadow','0 0 3px 0 #28a616');
    return false; //show error to the user instead of returning false
} else {    
        $.ajax({
        url: 'edit_billing2.php',
        data: "nameoncardfirst=" + nameoncardfirst+ "&nameoncardlast=" + nameoncardlast + "&street_address2=" + street_address2 +"&city2=" + city2 +"&state=" + state +"&zip=" + zip + "&cardnumber=" + cardnumber + "&expirationdate=" + expirationdate + "&cvv=" + cvv + "&cardtype=" + cardtype+ "&amount=" + amount + "&gender=" + gender + "&first_name=" + first_name + "&last_name=" + last_name + "&address=" + address + "&address2=" + address2 + "&city=" + city + "&post_code=" + post_code + "&country=" + country + "&mobile=" + mobile + "&email=" + email + "&newsletter=" + newsletter + "&make=" + vehicle + "&model=" + model + "&model_year=" + model_year,

        success: myCallback                
        });
    function myCallback(response) {
        console.log("Success response. Attempting to authorize payment.");
            //alert(response);
            result = response.split('_');
            //alert("Successfully Saved");
            alert(result[0]);
           if(result[0]=="Your Payment has completed successfully")
           {
            console.log("Payment Success");

            submiteval = true; 
            document.forms["form5"].submit();
           }
           else
           { 
            console.log("Payment Failed, Aborting form submission.");
            submiteval = false; //show error to the user instead of returning false
           }
            return submiteval;
    }
}
<form  name="form5" method="post" action="" id="newform">
<input type="button" value ="submit" onClick="billingfunction1();" />
    </form>

将billingfunction1分配给onclick事件而不是提交。 使用document.forms [“form5”]。submit（）在验证来自服务器的响应后手动提交表单。

答案 2 :(得分：-1)

$ .ajax有一个名为beforeSend（func）的选项。你可以在这个函数中验证你的数据，并返回false来取消ajax。

相关问题
最新问题