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

Question

根据我从ajax请求中收到的一些JSON,我希望允许或拒绝按下提交按钮(返回true/false).

我试图实现一个承诺,但是,在收到我的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

你有很多问题.最明显的一点是你不能只从异步代码(promise)返回使用它的返回值(它是未定义的!).

你需要做的是

1. 默认情况下阻止表单提交所有情况.
2. 妥善对待承诺并检查退回的旗帜.如果是,请使用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();
      }
    });
});