jQuery當然後完成

Question

我想驗證兩個調用到數據庫的字段。它會轉到數據庫並驗證它的真或假。我需要鏈接幾個AJAX調用來做到這一點。我正在使用.when,.then和.done來做到這一點，但它似乎沒有工作。

var Validate = function() { 
     var isValid = true; 
     $errorList.find('li').remove(); 
     $lblAError.text(''); 

     $.when(ParcelValidate(isValid)) 
      .then(AccountValidate(isValid)) 
      .done(function() { 
      return isValid 
     }); 
    }; 

    var ParcelValidate = function (isValid) { 
     return $.ajax({ 
      url: "../WebServices/ParcelMasterWebService.asmx/IsParcelActive", 
      method: "POST", 
      data: JSON.stringify({ "pin": $parcID.val() }), 
      contentType: 'application/json; charset=utf-8', 
      datatype: 'json', 
      success: function (data) { 
       if (!data.d) { 
        isValid = false; 
        $lblPError.text('!').css(({ "color": "red" })); 
        $errorList.append('<li>Parcel must be on record.</li>').css(({ "color": "red" })); 
       } 
      }, 
      fail: function() { 
       isValid = false; 
       $lblPError.text('!').css(({ "color": "red" })); 
       $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" })); 
      } 
     }) 
    } 
    var AccountValidate = function (isValid) { 
     return $.ajax({ 
      url: "../WebServices/FireProtectMasterWebService.asmx/isAccountActive", 
      method: "POST", 
      data: JSON.stringify({ "accountID": $parcID.val() }), 
      contentType: 'application/json; charset=utf-8', 
      datatype: 'json', 
      success: function (data) { 
       if (data.d) { 
        isValid = false; 
        $lblPError.text('!').css(({ "color": "red" })); 
        $errorList.append('<li>Cannot have duplicate Parcels.</li>').css(({ "color": "red" })); 
       } 
      }, 
      fail: function() { 
       isValid = false; 
       $lblPError.text('!').css(({ "color": "red" })); 
       $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" })); 
      } 
     }) 
    } 

Answer 1

你有幾個問題，第一個是，是，驗證功能不返回任何東西，因爲你正在異步調用的函數返回一個承諾，而不是返回一個布爾值，它會更好地拒絕/解決這個承諾，你的代碼應該是這樣的：

var Validate = function() { 
    $errorList.find('li').remove(); 
    $lblAError.text(''); 
    var promise = $.Deferred(); 

    ParcelValidate(promise).then(AccountValidate(promise)); 

    return promise; 
}; 

var ParcelValidate = function (promise) { 
    return $.ajax({ 
     url: "../WebServices/ParcelMasterWebService.asmx/IsParcelActive", 
     method: "POST", 
     data: JSON.stringify({ "pin": $parcID.val() }), 
     contentType: 'application/json; charset=utf-8', 
     datatype: 'json', 
     success: function (data) { 
      if (!data.d) { 
       $lblPError.text('!').css(({ "color": "red" })); 
       $errorList.append('<li>Parcel must be on record.</li>').css(({ "color": "red" })); 
       promise.reject(false); 
      } 
     }, 
     fail: function() { 
      $lblPError.text('!').css(({ "color": "red" })); 
      $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" })); 
      promise.reject(false); 
     } 
    }) 
} 
var AccountValidate = function (promise) { 
    return $.ajax({ 
     url: "../WebServices/FireProtectMasterWebService.asmx/isAccountActive", 
     method: "POST", 
     data: JSON.stringify({ "accountID": $parcID.val() }), 
     contentType: 'application/json; charset=utf-8', 
     datatype: 'json', 
     success: function (data) { 
      if (data.d) { 
       $lblPError.text('!').css(({ "color": "red" })); 
       $errorList.append('<li>Cannot have duplicate Parcels.</li>').css(({ "color": "red" })); 
       promise.reject(false); 
      } 
      promise.resolve(true); 
     }, 
     fail: function() { 
      $lblPError.text('!').css(({ "color": "red" })); 
      $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" })); 
      promise.reject(false); 
     } 
    }) 
} 

現在無論是調用驗證應該等待的承諾，並作出相應的反應到完成/失敗的方法，即：

Validate().done(function(){/*valid*/}).fail(function(){/*not valid*/}) 

最後一件事，因爲它是你的代碼，因爲你傳遞了isValid作爲參數，改變該值不會修改原始函數的isValid值。

Answer 2

我想解決的問題是我想拒絕一個點擊事件，如果我從一個Ajax調用得到true或來自另一個Ajax調用爲false。我遇到的問題是，它會運行所有這些事件並返回到啓動它的事件，一旦我從服務器獲得迴應，它將會返回我的回報，但不會返回事件。事件已經關閉，值爲true，並運行我的其他代碼段，即使我回來的答案是錯誤的。

爲了解決這個問題，我添加了另一個按鈕，讓他們點擊隱藏asp控件，並讓新按鈕運行驗證。當我從ajax得到答案時，我驗證返回的內容並告訴JavaScript單擊asp控件來觸發事件。不是最優雅或正確的方式，但它的工作原理。

var Validate = function (Filter) { 
    $errorList.find('li').remove(); 
    $lblAError.text(''); 
    var promise = $.Deferred(); 
    var hdnbtn = document.getElementById('btnInsert'); 

    $.when(ParcelValidate()).then(function (data) { 
     if (data.d) { 
      $.when(AccountValidate()).then(function (data2) { 
       if (data2.d) { 
        $lblPError.text('!').css(({ "color": "red" })); 
        $errorList.append('<li>Cannot have duplicate Parcels.</li>').css(({ "color": "red" })); 
       } else { 
        hdnbtn.click(); 
       } 
      }) 
     } 
     else { 
       $lblPError.text('!').css(({ "color": "red" })); 
       $errorList.append('<li>Parcel must be on record.</li>').css(({ "color": "red" })); 
      } 
    }) 
}; 

var ParcelValidate = function() { 
    return $.ajax({ 
     url: "../WebServices/ParcelMasterWebService.asmx/IsParcelActive", 
     method: "POST", 
     data: JSON.stringify({ "pin": $parcID.val() }), 
     contentType: 'application/json; charset=utf-8', 
     datatype: 'json',    
     fail: function() { 
      $lblPError.text('!').css(({ "color": "red" })); 
      $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" })); 
      //promise.fail(false); 
     } 
    }) 
}; 
var AccountValidate = function() { 
    return $.ajax({ 
     url: "../WebServices/FireProtectMasterWebService.asmx/isAccountActive", 
     method: "POST", 
     data: JSON.stringify({ "accountID": $parcID.val() }), 
     contentType: 'application/json; charset=utf-8', 
     datatype: 'json', 
     fail: function() { 
      $lblPError.text('!').css(({ "color": "red" })); 
      $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));     
     } 
    }) 
}