在 jQuery 中處理 $.ajax 失敗

Shraddha Paghdar 2022年6月13日

jQuery jQuery AJAX

今天的文章將討論在 jQuery 中處理 AJAX 中的失敗請求。

處理 jQuery 中的 `$.ajax` 失敗

jQuery 的 AJAX 釋出請求執行非同步 HTTP (AJAX) 請求。

語法：

jQuery.ajax([settings]).fail((jqXHR, textStatus) => {});
jQuery.ajax(url[, settings]).fail((jqXHR, textStatus) => {});

其中，

URL 是包含將傳送請求的 URL 的字串。
settings 是配置 AJAX 請求的鍵/值對物件。所有設定都是可選的；可以使用 $.ajaxSetup() 為每個選項設定預設值。

.fail() 方法取代了已棄用的 .error() 方法。這是錯誤回撥選項的替代構造。

如果請求失敗，則在 AJAX 配置中呼叫 error 回撥選項。它接收 jqXHR、指示錯誤型別的字串和異常物件（如果有）。

一些內建錯誤將字串作為異常物件返回，例如：abort、timeout、no transport。

$.ajax() 返回 jQuery XMLHttpRequest (jqXHR) 物件，它是瀏覽器原生 XMLHttpRequest 物件的超集。

讓我們通過以下示例來理解它。

注意：以下程式碼不能按原樣執行，也沒有輸出。必須將其新增到現有程式碼中才能檢視輸出。

HTML 程式碼：

<form id="myForm">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" value="Smith" />
  <input type="submit" value="Send" />
</form>

JavaScript 程式碼：

$("#myForm").submit(function (event) {
  event.preventDefault();
  $.ajax({
    method: "POST",
    url: "/open/hello-world",
    data: {
      name: "Smith",
      location: "United State"
    },
    error: function (jqXHR, thrownError) {
      alert(jqXHR.status);
      alert(thrownError);
    }
  }).done(function (msg) {
    alert("Data Saved: " + msg);
  }).fail((jqXHR, errorMsg) => {
    alert(jqXHR.responseText, errorMsg)
  });
})

在上面的示例中，一旦使用者提交了表單，就會使用指定的 URL 和引數向伺服器傳送 AJAX 呼叫。當伺服器返回成功訊息時，你可以在控制檯上列印該訊息或使用適當的訊息通知使用者。

如果伺服器返回錯誤訊息，你可以使用錯誤處理程式或 .fail() 捕獲錯誤，並使用適當的錯誤訊息通知使用者。

Author: Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

處理 jQuery 中的 $.ajax 失敗

相關文章 - jQuery AJAX

處理 jQuery 中的 `$.ajax` 失敗