javascript - jQuery ajax async false 修改页面中的html

Question

需要帮助来解决问题，陷入困境并投入大量时间。

我在这里做什么，

我正在使用 post 传统方法提交表单，但在提交表单之前，我正在使用上面的 jquery ajax 代码执行一些操作并且它工作正常。

当有人点击按钮时使用这段代码，我想显示加载器但它没有显示，因为在 jquery ajax 中使用了 async:false。它显示加载器完成 ajax 成功后。

在这种情况下，似乎没有任何事情发生，并且在单击按钮后没有加载器工作。

显示loader的html代码是这样的

<button type="submit" id="submit" class="btn btn-primary add_campaign_handler_button" name="submit">
    <i class="fa fa-spinner fa-spin" id="url_button_loader" style="display:none;"></i>
    Save Settings
</button>

jQuery:

$("#submit").click(function() {
  $('#url_button_loader').css('display', 'inline-block');
  var submit_flag = "yes";
  var where_to_appear_for_db = "";
  /* create custom post url */
  var post_name = $("#custom_post_slug").val();
  if (post_name != "") {
    var data = {
      data: post_name
    };
    $.ajax({
      url: ajaxurl,
      type: 'POST',
      data: {
        'action': 'create_custom_post_url',
        'data': data
      },
      beforeSend: function() {
        $('#url_button_loader').css('display', 'inline-block');
      },
      async: false,
      success: function(response) {
        if (response == "exists") {
          Swal.fire({
            type: 'error',
            title: 'Oops...',
            text: wpmlBackObj.smart_link_exists
          });
          $("#retargeting_url").val("");
          submit_flag = "no";
          $('html,body').animate({
            scrollTop: 0
          });
          return;
        }
        $("#tooltip_error").hide();
        $("#campaign_post_id_hidden").val(response);
        get_retargeting_url(response, "");
      }
    });
    if (submit_flag == "yes") {
      return true;
    } else {
      $('#url_button_loader').css('display', 'none');
      return false;
    }
  });
});

Answer 1

Using this code when some one click on button, I want to show loader but it do not show because of using async:false in jquery ajax. It shows the loader after completing the ajax success.

这就是为什么 async: false 被弃用的原因。

它完全锁定了 UI。

如果您想在发出请求时执行任何操作，请不要使用 async: false。

相反:始终阻止默认行为，然后(如果需要)在异步操作完成后重新触发它。