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の成功関数を追加する」とコメントしてください。私はそれを削除しますが、将来の参照のためにここに残しておきます

とにかくデータを送信し、サーバーから検証を行うことをお勧めします。この方法では、外部からの人々は検証を見ることができず、適切なデータなしでそれをバイパスすることができます。

しかし、あなたはあなたのデータを送信する前にそれを行うことを希望する場合もcomplete: function() {}あり

$.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'); 
      } 
    } 
}); 

注だろうbeforeSend機能

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

あなたのコードを使用して完全な例を使用することができます成功後に使用できる関数

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() { 
    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

：あなたのデータはあなたの if文の基準に適合しない限り、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'); 
      } 
     }); 
    }); 
    }); 
}); 

はさらに、あなたのコードを最適化するには、次の混乱を最小限に抑えるために、私は、上記の構文を使用していませんでした

successおよびerrorは、ajax呼び出しが成功したかどうかによって実行されます。エラー処理を呼び出すことができるエラー関数、およびエラー条件が満たされたときの成功ハンドラを定義することができます。また、不必要な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'); 
}