Question

根据我从ajax请求中收到的一些JSON，我希望允许或拒绝按下提交按钮（返回true / false）。

我试图实施承诺，但是，我仍然可以看到产品不可用＆＃39;在收到我的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（承诺）使用它的返回值（它是未定义的！）。

您需要做的是

默认情况下阻止表单提交。
正确对待承诺并检查返回的标志。如果确实如此，请使用DOM API手动提交表单（表单提交方法）。
确保使用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();
      }
    });
});

Answer 2

我认为你尝试做的事情是不可能的。此时必须处理UI事件，并且ajax请求是异步的。您可以在单击时阻止表单提交，禁用按钮并等待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
                submitForm();
            }else{
                console.log('product unavailable (error message)');
            }
        })


    }
}

function submitForm() {
    $('#myForm').submit();
    $('#submitButton').removeAttr('disabled');
}

// click handler
$('#submitButton').on('click', function(e){
    //prevent submitting
    e.preventDefault();
    // Disable, you could show a loading animation/gif
    $(this).attr('disabled','disabled');
    // call ajax
    oAH.ValidateSubmit(this);
}

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

2 个答案: