jquery 如何在下一个之前等待 ajax 调用

Question

我的网站上有一个表格，在某些情况下我需要验证 phone 号码，而在其他情况下我不需要（根据输入字段的变化。

表单由数据库中的数据填充，如果输入“phone_Number”已更改，我需要在按下提交时验证数字。

如果输入“phone_number”未更改，则表单还有其他输入需要验证。

我的问题是：如果 phone 号码发生变化，我需要用 ajax 拨打 2 次电话，而不是 1 次，我不知道最好的方法是什么.我读过 async: false 已被弃用，因此我需要帮助来安排我的代码以使提交工作。

我看过一些不同的 jquery when/wait 示例，但我不理解 jquery 足以将示例结果更改为我的问题。

$(document).on('submit', '#order_form', function(event){
   let form_data = new FormData($('#order_form')[0]);
   let phone_number = $('#phone_number').val();
   form_data.append('customer_name',$('#customer_name').val());
   if($('#old_number').val() != phone_number) {
      $.ajax({
         url: 'https://api.numlookupapi.com/v1/validate/' + phone_number + '?apikey=api_key',
         dataType: 'json',
         success: function(json) {
            form_data.append('valid',json.valid);
            form_data.append('number',json.number);
            form_data.append('local_format',json.local_format);
            .... some additional "form_data.append" happens here ....
         }
      });
   } else {
      form_data.append('local_format',phone_number);
   }
   $.ajax({
      url: "process.php",
      method: 'POST',
      data: form_data,
      contentType: false,
      processData: false,
      success: function () {
         .... do something ....
      }
   });
});`

Answer 1

您可以将第二个 AJAX 调用放在前一个 AJAX 函数的成功方法中。像这样：

function processFormData(form_data)
{
   $.ajax({
      url: "process.php",
      method: 'POST',
      data: form_data,
      contentType: false,
      processData: false,
      success: function () {
         .... do something ....
      }
   });
}

$(document).on('submit', '#order_form', function(event){
   let form_data = new FormData($('#order_form')[0]);
   let phone_number = $('#phone_number').val();
   form_data.append('customer_name',$('#customer_name').val());
   if($('#old_number').val() != phone_number) {
      $.ajax({
         url: 'https://api.numlookupapi.com/v1/validate/' + phone_number + '?apikey=api_key',
         dataType: 'json',
         success: function(json) {
            form_data.append('valid',json.valid);
            form_data.append('number',json.number);
            form_data.append('local_format',json.local_format);
            .... some additional "form_data.append" happens here ....
            processFormData(form_data);
         }
      });
   } else {
      form_data.append('local_format',phone_number);
      processFormData(form_data);
   }
});

当phone号码发生变化时processFormData()只有在API调用成功后才会调用，否则直接调用processFormData()[=13] =]

注意：为什么不直接使用一个AJAX电话，然后检查PHP是否phone号码已经改变？您可以从 PHP 调用 API 来检查号码是否有效。一般来说，您应该始终进行最终输入验证 server-side，因为任何东西 client-side 都可以被操纵。

jquery 如何在下一个之前等待 ajax 调用

jquery how to wait for ajax call before next

jquery

ajax