jQuery-Ajax

AJAX 是异步 JavaScript 和 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方法。
回调- 响应数据加载到匹配集的元素后调用的回调函数。传递给此函数的第一个参数是从服务器接收到的响应文本，第二个参数是状态代码。

例子

考虑以下带有小 JQuery 编码的 HTML 文件 -

现场演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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 的查询字符串，或预格式化和编码的查询字符串。
回调- 请求完成时调用的函数。将响应正文消化为 JSON 字符串而产生的数据值作为第一个参数传递给此回调，状态作为第二个参数。

例子

考虑以下带有小 JQuery 编码的 HTML 文件 -

现场演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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 方法的数据参数将收集的数据传递到服务器变得非常容易。

例子

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

现场演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.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( 选项 ) 使用 HTTP 请求加载远程页面。
2	jQuery.ajaxSetup( 选项 ) 设置 AJAX 请求的全局设置。
3	jQuery.get( url, [数据], [回调], [类型] ) 使用 HTTP GET 请求加载远程页面。
4	jQuery.getJSON( url, [数据], [回调] ) 使用 HTTP GET 请求加载 JSON 数据。
5	jQuery.getScript( url, [回调] ) 使用 HTTP GET 请求加载并执行 JavaScript 文件。
6	jQuery.post( url, [数据], [回调], [类型] ) 使用 HTTP POST 请求加载远程页面。
7	加载( url, [数据], [回调] ) 从远程文件加载 HTML 并将其注入到 DOM 中。
8	序列化（）将一组输入元素序列化为数据字符串。
9	序列化数组() 像 .serialize() 方法一样序列化所有表单和表单元素，但返回一个 JSON 数据结构供您使用。

JQuery AJAX 事件

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

您可以浏览所有AJAX 事件。

先生。	方法与说明
1	ajaxComplete(回调) 附加一个在 AJAX 请求完成时执行的函数。
2	ajaxStart(回调) 附加一个每当 AJAX 请求开始且没有活动的函数时要执行的函数。
3	ajax错误（回调）附加一个在 AJAX 请求失败时执行的函数。
4	ajaxSend(回调) 附加一个在发送 AJAX 请求之前要执行的函数。
5	ajaxStop（回调）附加一个在所有 AJAX 请求结束时执行的函数。
6	ajax成功(回调) 附加一个在 AJAX 请求成功完成时执行的函数。