Jquery 简明教程

jQuery - Ajax

异步 JavaScript 和 XML 的缩写是 AJAX，这项技术帮助我们在不刷新浏览器页面时，从服务器加载数据。

AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data from the server without a browser page refresh.

如果您刚开始接触 AJAX，那么我建议您在继续之前先阅读我们的 Ajax Tutorial 。

If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further.

jQuery 是一个很好的工具，它提供了丰富的 AJAX 方法来开发下一代 Web 应用程序。

JQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application.

Loading Simple Data

使用 jQuery AJAX 可以轻松加载任何静态数据或动态数据。jQuery 提供 load() 方法来完成这项工作 −

This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job −

Syntax

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

Here is the simple syntax for load() method −

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

以下是所有参数的说明 −

Here is the description of all the parameters −

URL − The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.
data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.

Example

考虑以下带有少量 JQuery 编码的 HTML 文件 −

Consider the following HTML file with a small JQuery coding −

<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 −

Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside <div> tagged with ID stage. Assuming, our /jquery/result.html file has just one HTML line −

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

* *当你点击给定的按钮，result.html文件就会被加载。

When you click the given button, then result.html file gets loaded.

Getting JSON Data

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

There would be a situation when server would return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action.

Syntax

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

Here is the simple syntax for getJSON() method −

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

以下是所有参数的说明 −

Here is the description of all the parameters −

URL − The URL of the server-side resource contacted via the GET method.
data − An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.
callback − A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.

Example

考虑以下带有少量 JQuery 编码的 HTML 文件 −

Consider the following HTML file with a small JQuery coding −

<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 格式的内容 −

Here JQuery utility method getJSON() initiates an Ajax request to the specified URL result.json file. After loading this file, all the content would be passed to the callback function which finally would be populated inside <div> tagged with ID stage. Assuming, our result.json file has following json formatted content −

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

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

When you click the given button, then result.json file gets loaded.

Passing Data to the Server

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

Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method.

Example

此示例演示如何将用户输入传递到网络服务器脚本，该脚本将发送回相同的结果，我们将会打印它 −

This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it −

<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 脚本编写的代码 −

Here is the code written in result.php script −

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

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

Now you can enter any text in the given input box and then click "Show Result" button to see what you have entered in the input box.

JQuery AJAX Methods

您已经看到使用 JQuery 的 AJAX 基本概念。下表列出了所有重要的 JQuery AJAX 方法，您可以根据您的编程需要使用它们 −

You have seen basic concept of AJAX using JQuery. Following table lists down all important JQuery AJAX methods which you can use based your programming need −

Sr.No.	Methods & Description
1	jQuery.ajax( options )Load a remote page using an HTTP request.
2	jQuery.ajaxSetup( options )Setup global settings for AJAX requests.
3	jQuery.get( url, [data], [callback], [type] )Load a remote page using an HTTP GET request.
4	jQuery.getJSON( url, [data], [callback] )Load JSON data using an HTTP GET request.
5	jQuery.getScript( url, [callback] )Loads and executes a JavaScript file using an HTTP GET request.
6	jQuery.post( url, [data], [callback], [type] )Load a remote page using an HTTP POST request.
7	load( url, [data], [callback] )Load HTML from a remote file and inject it into the DOM.
8	serialize( )Serializes a set of input elements into a string of data.
9	serializeArray( )Serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.

JQuery AJAX Events

在 AJAX 调用进程的生命周期中，您可以调用各种 JQuery 方法。基于不同的事件/阶段有以下可用方法 −

You can call various JQuery methods during the life cycle of AJAX call progress. Based on different events/stages following methods are available −

您可以浏览所有 AJAX Events 。

You can go through all the AJAX Events.

Sr.No.	Methods & Description
1	ajaxComplete( callback )Attach a function to be executed whenever an AJAX request completes.
2	ajaxStart( callback )Attach a function to be executed whenever an AJAX request begins and there is none already active.
3	ajaxError( callback )Attach a function to be executed whenever an AJAX request fails.
4	ajaxSend( callback )Attach a function to be executed before an AJAX request is sent.
5	ajaxStop( callback )Attach a function to be executed whenever all AJAX requests have ended.
6	ajaxSuccess( callback )Attach a function to be executed whenever an AJAX request completes successfully.