在 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` 失败