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

要进一步优化代码，除非您的数据符合if声明的条件，否则请不要发出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

执行

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

在AJAX中的成功函数之前添加条件

3 个答案: