jQuery - Ajax

AJAX 是 Asynchronous JavaScript and XML 的首字母缩写，这项技术可以帮助我们从服务器加载数据，而无需刷新浏览器页面。

如果您不熟悉 AJAX，建议您在继续学习之前先阅读我们的 Ajax 教程。

JQuery 是一款非常棒的工具，它提供了一套丰富的 AJAX 方法来开发下一代 Web 应用程序。

加载简单数据

使用 JQuery AJAX 加载任何静态或动态数据都非常容易。JQuery 提供了 load() 方法来完成这项工作 -

语法

以下是 load() 方法的简单语法 -

[selector].load( URL, [data], [callback] );

以下是所有参数的描述 -

URL - 发送请求的服务器端资源的 URL。它可以是动态生成数据或从数据库中获取数据的 CGI、ASP、JSP 或 PHP 脚本。
data - 此可选参数表示一个对象，其属性被序列化为正确编码的参数，以传递给请求。如果指定，则使用 POST 方法进行请求。如果省略，则使用 GET 方法。
callback - 在响应数据加载到匹配集合的元素后调用的回调函数。传递给此函数的第一个参数是从服务器接收到的响应文本，第二个参数是状态代码。

示例

考虑以下包含少量 JQuery 代码的 HTML 文件 -

在线演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

这里 load() 初始化对指定 URL /jquery/result.html 文件的 Ajax 请求。加载此文件后，所有内容都将填充到 ID 为 stage 的 <div> 标签中。假设我们的 /jquery/result.html 文件只有一行 HTML -

<h1>THIS IS RESULT...</h1>

当您单击给定的按钮时，result.html 文件将被加载。

获取 JSON 数据

可能会出现服务器根据您的请求返回 JSON 字符串的情况。JQuery 实用程序函数 getJSON() 将返回的 JSON 字符串解析，并将结果字符串作为第一个参数提供给回调函数，以采取进一步操作。

语法

以下是 getJSON() 方法的简单语法 -

[selector].getJSON( URL, [data], [callback] );

以下是所有参数的描述 -

URL - 通过 GET 方法联系的服务器端资源的 URL。
data - 一个对象，其属性用作构建要附加到 URL 的查询字符串的名称/值对，或预格式化和编码的查询字符串。
callback - 请求完成后调用的函数。将 JSON 字符串作为响应主体进行处理后得到的数据值作为第一个参数传递给此回调函数，状态作为第二个参数传递。

示例

考虑以下包含少量 JQuery 代码的 HTML 文件 -

在线演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

这里 JQuery 实用程序方法 getJSON() 初始化对指定 URL result.json 文件的 Ajax 请求。加载此文件后，所有内容都将传递给回调函数，该函数最终将填充到 ID 为 stage 的 <div> 标签中。假设我们的 result.json 文件具有以下 JSON 格式的内容 -

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

当您单击给定的按钮时，result.json 文件将被加载。

将数据传递到服务器

很多时候，您会从用户那里收集输入，并将该输入传递到服务器以进行进一步处理。JQuery AJAX 使得使用任何可用 Ajax 方法的 data 参数将收集到的数据传递到服务器变得非常容易。

示例

此示例演示如何将用户输入传递到 Web 服务器脚本，该脚本将发送相同的结果，然后我们将打印它 -

在线演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

以下是 result.php 脚本中编写的代码 -

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

现在您可以在给定的输入框中输入任何文本，然后单击“显示结果”按钮以查看您在输入框中输入的内容。

JQuery AJAX 方法

您已经了解了使用 JQuery 的 AJAX 的基本概念。下表列出了所有重要的 JQuery AJAX 方法，您可以根据您的编程需要使用这些方法 -

序号	方法及说明
1	jQuery.ajax( options ) 使用 HTTP 请求加载远程页面。
2	jQuery.ajaxSetup( options ) 为 AJAX 请求设置全局设置。
3	jQuery.get( url, [data], [callback], [type] ) 使用 HTTP GET 请求加载远程页面。
4	jQuery.getJSON( url, [data], [callback] ) 使用 HTTP GET 请求加载 JSON 数据。
5	jQuery.getScript( url, [callback] ) 使用 HTTP GET 请求加载并执行 JavaScript 文件。
6	jQuery.post( url, [data], [callback], [type] ) 使用 HTTP POST 请求加载远程页面。
7	load( url, [data], [callback] ) 从远程文件加载 HTML 并将其注入 DOM。
8	serialize( ) 将一组输入元素序列化为数据字符串。
9	serializeArray( ) 像 .serialize() 方法一样序列化所有表单和表单元素，但会返回 JSON 数据结构供您使用。

JQuery AJAX 事件

您可以在 AJAX 调用进度生命周期期间调用各种 JQuery 方法。根据不同的事件/阶段，可以使用以下方法 -

您可以浏览所有 AJAX 事件。

序号	方法及说明
1	ajaxComplete( callback ) 附加一个函数，以便在任何 AJAX 请求完成后执行。
2	ajaxStart( callback ) 附加一个函数，以便在任何 AJAX 请求开始并且没有其他活动请求时执行。
3	ajaxError( callback ) 附加一个函数，以便在任何 AJAX 请求失败时执行。
4	ajaxSend( callback ) 附加一个函数，以便在发送 AJAX 请求之前执行。
5	ajaxStop( callback ) 附加一个函数，以便在所有 AJAX 请求都结束时执行。
6	ajaxSuccess( callback ) 附加一个函数，以便在任何 AJAX 请求成功完成时执行。

打印页面