在AJAX中添加成功函數前的條件

Question

我想創建成功函數的條件。

如果它不符合要求，那麼它應該去錯誤的功能。

$(function() { 
 
    var $orders = $('#orders'); 
 
    var $name = $('#name'); 
 
    var $age = $('#age'); 
 

 
    $('#add-order').on('click', function() { 
 
     var order = { 
 
     name: $name.val(), 
 
     age: $age.val(), 
 
     }; 
 

 
     $.ajax({ 
 
      type: 'POST', 
 
      url: '/api/test.json', 
 
      data: order, 
 
      if (order.name.length > 5 && newOrder.age > 16) { 
 
      success: function(newOrder) { 
 
       $orders.append('<li>name : ' + newOrder.name + ' age :' + newOrder.age + '</li>'); 
 
      } else { 
 
       // if name length is not more than 5 and age is less than 17 it will error. 
 
       error: function() { 
 
       alert('error loading orders'); 
 
       } 
 
      } 
 
      }); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="orders"></ul> 
 

 
<p>name: <input type="text" id="name"></p> 
 
<p>age: <input type="text" id="age"></p>

謝謝您的幫助。

Answer 1

由於您的主題是「在AJAX中添加條件之前成功功能」，請忽略此評論。我會刪除它，但我會把它留在這裏供將來參考

我建議你發送數據，並從服務器做你的驗證。這樣，來自外部的人不會看到驗證，並且能夠在沒有正確數據的情況下繞過驗證。

但是，如果你想發送數據之前做到這一點的，你可以使用beforeSend功能

, beforeSend: function() { 
    // do validfations here 
}, 

使用你的代碼一個完整的例子是

$.ajax({ 
    type: 'POST' 
    , url: '/api/test.json' 
    , data: order 
    beforeSend: function() { 
     if (order.name.length <= 5 || newOrder.age <= 16) { 
      // display error message here 
      return false; 
     } 
    }, 
    , success: function(newOrder) { 
      $orders.append('<li>name : ' + newOrder.name + ' age :' + newOrder.age + '</li>'); 
     } else { 
      // if name length is not more than 5 and age is less than 17 it will error. 
      error: function() { 
      alert('error loading orders'); 
      } 
    } 
}); 

請注意，還有一個complete: function() {}函數，您可以在成功後使用

Answer 2

Ajax（）函數將執行如下操作：

成功：如果請求成功，將被調用的函數。
錯誤：如果請求失敗將被調用的函數。

Source: AJAX Documentation

所以，這兩個將被稱爲基礎上，如果Ajax請求成功或失敗。如果它得到狀態碼爲200的響應，它將會成功。您可以根據這樣的響應定製你的回調，因爲它可能是單獨處理成功和失敗的清潔方法：

var jqxhr = $.ajax("example.php") 
    .done(function() { //done is the same as success 
    alert("success"); 
    }) 
    .fail(function() {//will run if it fails 
    alert("error"); 
    }) 
    .always(function() {//will ALWAYS run 
    alert("complete"); 
    }); 

從我可以理解你的代碼，你可能要篩選查詢在執行AJAX調用之前。爲了儘量避免混淆，我沒有使用上述語法：

$(function() { 
    var $orders = $('#orders'); 
    var $name = $('#name'); 
    var $age = $('#age'); 

    $('#add-order').on('click', function() { 
     var order = { 
     name: $name.val(), 
     age: $age.val(), 
     }; 

     $.ajax({ 
      type: 'POST', 
      url: '/api/test.json', 
      data: order, 
      success: function(newOrder) { 
      if ($name.val() > 5 && $age.val()){ 
       $orders.append('<li>name : ' + newOrder.name + ' age :' + newOrder.age + '</li>'); 
      } 
      }, 
      error: function() { 
      alert('error loading orders'); 
      } 
     }); 
    }); 
    }); 
}); 

要進一步優化你的代碼，不要使AJAX請求，除非你的數據符合你if語句的標準：

$(function() { 
    var $orders = $('#orders'); 
    var $name = $('#name'); 
    var $age = $('#age'); 

    $('#add-order').on('click', function() { 
    if ($name.val() > 5 && $age.val()){ 
     var order = { 
     name: $name.val(), 
     age: $age.val(), 
     }; 

     $.ajax({ 
      type: 'POST', 
      url: '/api/test.json', 
      data: order, 
      success: function(newOrder) { 
      $orders.append('<li>name : ' + newOrder.name + ' age :' + newOrder.age + '</li>'); 

      }, 
      error: function() { 
      alert('error loading orders'); 
      } 
     }); 
     } else { 
     alert('Name and age did not fit criteria for an order'); 
     } 
    }); 
    }); 
}); 

Answer 3

success和error取決於ajax調用是否成功執行。你可以定義一個錯誤函數，當錯誤條件滿足時，你可以在錯誤處理函數中和成功處理函數中調用它。

if (order.name.length < 6) { 
    myerrorhandler(); 
} else { 
    $.ajax({ 
     type: 'POST', 
     url: '/api/test.json', 
     data: order, 
     success: function(newOrder){ 
       if (newOrder.age > 16) { 
        $orders.append('<li>name : '+ newOrder.name +' age :'+ newOrder.age+'</li>'); 
        } else { // if age is less than 17 
        myerrorhandler(); 
        } 
       }, 
     error: function(){ 
        myerrorhandler(); 
       } 
    }); 
} 

而且功能：

function myerrorhandler() { 
    alert('error loading orders'); 
} 

您也可以進行不必要的AJAX請求前檢查訂單長度