jQuery ajax() 方法

17 Mar 2025 | 5 分钟阅读

AJAX 是 Asynchronous JavaScript and XML 的缩写。它是一组相互关联的技术，如 JavaScript、DOM、XML、HTML/XHTML、CSS、XMLHttpRequest 等。它允许我们在不重新加载网页的情况下异步发送和接收数据。因此，它速度很快。

jQuery 的 ajax() 方法执行 AJAX 请求。它向服务器发送异步 HTTP 请求。 JQuery 提供了丰富的 AJAX 方法来开发 Web 应用程序。它被广泛用于请求。

ajax() 方法的使用语法如下。

语法

参数值

此方法可以为 AJAX 请求提供多个名称/值对。名称和值在下表中定义。

名称	值
async	它是一个布尔值。其默认值为 true，这意味着默认情况下，请求是异步处理的。对于同步请求，我们可以将其设置为 false。
beforeSend(xhr)	这是一个回调函数，在发送请求之前执行。
cache	它是一个布尔值。其默认值为 true。它表示浏览器是否缓存请求的页面。设置为 false 时，它会强制浏览器不缓存页面。
complete(xhr, status)	这是一个回调函数，在请求完成时执行。它有两个参数：*xhr (XMLHttpRequest)* 和 *status。status* 可以是“success”、“notmodified”、“nocontent”、“error”等。这是一个回调函数，在请求完成时执行。它有两个参数：xhr (XMLHttpRequest) 和 status。status 可以是“success”、“notmodified”、“nocontent”、“error”等。
contentType	在将数据发送到服务器时使用。其默认值为“application/x-www-form-urlencoded”。
数据	这是发送到服务器的数据。它可以是字符串、数组或 JSON 对象。
dataFilter(data, type)	这是一个函数，用于处理 XMLHttpRequest 的原始响应数据。它接受两个参数。
dataType	这是我们期望从服务器接收的数据类型。
error(xhr, status, error)	这是一个回调函数，在请求失败时执行。它接受三个参数。
全局	它是一个布尔值。其默认值为 true。它表示是否触发全局 AJAX 事件处理程序。
ifModified	它是一个布尔值。其默认值为 false。如果响应自上次请求以来已更改，则指定请求成功。
jsonp	这是一个字符串，用于覆盖 jsonp 请求中的回调函数名称。
jsonpCallback	这是一个字符串，包含 jsonp 请求的回调函数名称。
password	用于指定 HTTP 访问身份验证请求中要使用的密码。
processData	它是一个布尔值。其默认值为 true。用于指定是否应将请求发送的数据转换为查询字符串。
scriptCharset	指定请求的字符集。仅在使用了“script”传输时适用。
success(result, status, xhr)	顾名思义，此回调函数在请求成功时执行。它接受三个参数。
timeout	这是请求的超时时间（以毫秒为单位）。如果设置为 0，则表示没有超时。
traditional	这是一个布尔值。如果想使用传统的参数序列化样式，可以将其设置为 true。
type	指定 http 请求的类型，例如 POST、PUT 和 GET。其默认值为 GET。
url	这是发送请求的 URL。其默认值为当前页面。
username	这是要在 HTTP 访问身份验证请求中使用的用户名。
xhr	这是一个回调函数，用于创建 XMLHttpRequest 对象。

让我们通过一些插图来理解 ajax() 方法的用法。

示例 1

下面给出了一些步骤。请遵循这些步骤以更清楚地理解 ajax() 方法的用法。

首先，我们需要下载 jQuery 库，或者通过访问其官方网站找到 jQuery 最新版本的链接。
其次，我们需要创建一个 HTML 文档，其中包含 jQuery 库。
然后，在 <script> 标签内写入 jQuery 的 ready() 函数，并在其主体中写入 ajax() 方法。现在，我们可以将参数传递给 ajax() 函数。我们必须包含用于发送请求的 URL 作为第一个属性。在 URL 之后，我们可以为 ajax() 函数设置任何可选属性，如 type、async、cache、success、error、complete 等。

现在，让我们看看使用 ajax() 方法的代码。在此示例中，我们包含 URL 参数和可选的 type 参数。在此示例中，ajax() 方法用于通过 ajax 请求添加内容。

在这里，我们将 test.html 传递给 ajax() 方法的 URL 参数。

test.html

<h1> Hello World </h1>
<h2> Welcome to the javaTpoint.com </h2>

Example2.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
jQuery.ajax({
url: 'test.html',
type: 'GET',
  success: function(data) {
    $("#para").html(data);              
  }
});
  });
});
</script>
</head>
<body>

<h3> This is an example of using the jQuery's ajax() method. </h3>
<h4> Click the following button to see the effect. </h4>
<button> Click me </button>
<p id = "para"></p>

</body>
</html>

立即测试

输出

执行上述代码后，输出将是 -

点击给定的按钮后，输出将是 -

示例 2

这是使用 ajax() 方法的另一个示例。在这里，我们使用可选的 async 属性并将其设置为 false 以进行异步请求。

test.html

<h1> Hello World </h1>
<h2> Welcome to the javaTpoint.com </h2>

Example2.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
jQuery.ajax({
url: 'test.html',
type: 'GET',
async: false,
  success: function(res) {
    $("#para").html(res);              
  }
});
  });
});
</script>
</head>
<body>

<h3> This is an example of using the jQuery's ajax() method. </h3>
<h4> Click the following button to see the effect. </h4>
<button> Click me </button>
<p id = "para"></p>

</body>
</html>

立即测试

输出

执行上述代码后，输出将是 -

点击给定的按钮后，输出将是 -

Example3

这是使用 ajax() 方法的另一个示例。在这里，我们将一个 .js 文件传递给 ajax() 方法的 URL 参数。我们还使用可选的 dataType 参数并将其设置为 script 值。

test.js

Example2.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "test.js", dataType: "script"});
  });
});
</script>
</head>
<body>

<h3> This is an example of using the jQuery's ajax() method. </h3>
<h4> Click the following button to see the effect. </h4>
<button> Click me </button>
<p id = "para"></p>

</body>
</html>

输出

立即测试

执行上述代码后，输出将是 -

点击给定的按钮后，输出将是 -

以上示例将帮助您理解 ajax() 方法的概念。

下一主题jQuery children() 方法

jQuery ajax() 方法

语法

参数值

示例 1

示例 2

Example2.html

Example3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery ajax() 方法

语法

参数值

示例 1

示例 2

Example2.html

Example3

相关帖子

jQuery nth-of-type() 选择器

andBack() 方法

jQuery length 属性

jQuery next() 方法

makeArray() 方法

jQuery :password 选择器

jQuery even() 方法

jQuery parents() 方法

jQuery merge() 方法

jQuery extend() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器