javascript - 根据 ajax 响应，在提交按钮单击时返回 true/false

Question

基于我从 ajax 请求收到的一些 JSON，我希望允许或拒绝按下提交按钮(返回 true/false)。

我试图实现一个 promise ，但是，在我收到我的 ajax 响应之前，我仍然可以看到“产品不可用”被调用。

问题是否出在表单/提交按钮上？或者这仍然可能吗？

var oAH = {

    ValidateSubmit : function(self){

        // send request to handler
        $.ajax({
            type: "POST",
            url: "",
            data: aData,
            cache: false})
        .done(function(data) {

            var oJSON = JSON.parse(data);
            if(oJSON.Status === 1){
                // return true to allow form to submit
                return true;
            }else{
                console.log('product unavailable (error message)');
                return false;
            }
        })


    }
}


// click handler
$('#submitButton').on('click', function(){
    return oAH.ValidateSubmit(this);
}

Answer 1

您有很多问题。最明显的是你can't just return from asynchronous code ( promise )使用它的返回值(它是未定义的!)。

你需要做的是

1. 默认情况下阻止提交表单。
2. 正确对待 promise 并检查返回的标志。如果是，则使用 DOM API(表单提交方法)手动提交表单。
3. 确保使用 onsubmit 事件而不是按钮 onclick。

放在一起看起来像这样:

var oAH = {

  ValidateSubmit: function(self) {

    // send request to handler
    return $.ajax({
      type: "POST",
      url: "",
      data: aData,
      cache: false
    })
      .then(function(data) { // <----- make sure you use .then
        return data.Status === 1;
      });
  }
}


// form onsubmit handler, form has id form for example, etc.
$('#form').on('submit', function(e) {
  var form = this;
  e.preventDefault()

  return oAH.ValidateSubmit(this)
    .then(function(canSubmit) {
      if (canSubmit) {
        form.submit();
      }
    });
});