有没有办法阻止Form执行操作并等待ajax完成执行?

时间:2017-11-20 09:52:44

标签: javascript

在客户可以继续使用PayPal之前,我会快速检查数据库,看看这些商品是否仍然可用。我遇到的问题是,当Ajax正在执行时。函数 check_availability 继续执行,并在完成Ajax之前向Form onsubmit返回true。为了解决这个问题,我一直在调用同一个函数。但我不认为这是最好的选择。

以下是代码:

<form  onsubmit="return check_availability(0,0,1)"  action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="pp1">

function ajax_paypal(orders){
    var htpr = new XMLHttpRequest();
    var url = "Hi there";
    var val = "orders="+orders;
    htpr.open("POST", url, true);
    htpr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    htpr.onreadystatechange = function(){
        if(htpr.readyState == 4 && htpr.status == 200){
            var sold_out_ids = htpr.responseText;
            check_availability("continue", sold_out_ids, 0);
        }
    };
    htpr.send(val);
}

function check_availability(str, sold_out_ids, n) {
    if (str === "continue") {
        if (sold_out_ids > 0) {
            alert("One of your items has sold out! Sorry for any inconvenience");
            location.reload();
            return false;
        } else {
            return true;
        }
    }else if(n === 1){
        var orders = [];
        var x = document.cookie.split(';'); // your array of cookies
        var i = 0;
        x.forEach(item => {
            //to make sure that item contains "order"
            if (item.indexOf('order') > -1) {
                var val = item.split("=");
                orders[i] = val[1]+"o";
                i++;

            }
        });
        ajax_paypal(orders);
    }
    check_availability(0, 0, 0);//I keep calling this until Ajax is completed
}

1 个答案:

答案 0 :(得分:0)

您可以使用以下代码段来解决。这将在提交时调用,但在实际提交之前如果您从此处返回true表单将提交给paypal。如果您返回虚假表单将无法提交。

  $('#pp1').submit(function() {
    var submitOrNot=await callcheck_availability();

    return true; // return false to cancel form submit
});

async function callcheck_availability(){
//your function goes here
}

有关async await的更多信息,请阅读MDN

上的此页面