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://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的查询字符串的名称/值对，或者一个预格式化和编码的查询字符串。
callback −请求完成时调用的函数。从将响应体作为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方法的 data 参数，轻松地将收集到的数据传递给服务器。

示例

此示例演示了如何将用户输入传递给一个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( 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( ) 将所有表单和表单元素序列化为JSON数据结构，类似于.serialize()方法，但用于处理。

JQuery AJAX 事件

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

您可以浏览所有的AJAX 事件。

序号	方法和描述
1	ajaxComplete(回调函数) 在每次AJAX请求完成时执行一个函数。
2	ajaxStart(回调函数) 在每次AJAX请求开始时执行一个函数，而且之前没有其他请求在进行中。
3	ajaxError(回调函数) 在每次AJAX请求失败时执行一个函数。
4	ajaxSend(回调函数) 在每次发送AJAX请求前执行一个函数。
5	ajaxStop(回调函数) 在所有AJAX请求结束时执行一个函数。
6	ajaxSuccess(回调函数) 在每次AJAX请求成功完成时执行一个函数。