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

當有人單擊按鈕時使用此代碼，我想顯示加載程序，但由於在 jquery ajax 中使用 async:false 而未顯示。 它在完成 ajax 成功后顯示加載器。

這就是不推薦使用async: false原因。

它完全鎖定了用戶界面。

如果您想在發出請求時執行任何操作，請不要使用async: false 。

相反：始終阻止默認行為，然后（如果需要）在異步操作完成后重新觸發它。