📌  相关文章
📜  jQuery-Ajax

📅  最后修改于: 2020-10-23 08:18:44             🧑  作者: Mango

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方法。

  • callback-将响应数据加载到匹配集的元素中后调用的回调函数。传递给该函数的第一个参数是从服务器接收到的响应文本，第二个参数是状态码。

例

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

现场演示
The jQuery Example
      
        
      
   
    
   
      
Click on the button to load /jquery/result.html file −

        
      

         STAGE

在这里， load（）向指定的URL /jquery/result.html文件发起Ajax请求。加载此文件后，所有内容将填充到标记为stage的

内部。假设我们的/jquery/result.html文件只有一行HTML行-

THIS IS RESULT...

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

获取JSON数据

服务器可能会针对您的请求返回JSON字符串。 jQuery实用程序函数getJSON（）解析返回的JSON字符串，并将所得的字符串作为第一个参数提供给回调函数，以采取进一步的操作。

句法

这是getJSON（）方法的简单语法-

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

这是所有参数的描述-

  • URL-通过GET方法联系的服务器端资源的URL。

  • 数据-其属性作为用于构造查询字符串附加到URL中的名称/值对，或一个预格式化和编码的查询字符串的对象。

  • 回调-请求完成时调用的函数。将响应主体摘要为JSON字符串得到的数据值将作为第一个参数传递给此回调，而将状态作为第二个参数传递。

例

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

现场演示
The jQuery Example
      
        
      
   
    
   
      
Click on the button to load result.json file −

        
      

         STAGE

在这里，JQuery实用程序方法getJSON（）向指定的URL result.json文件发起Ajax请求。加载此文件后，所有内容将传递到回调函数，该函数最终将填充在带有ID stage的

中。假设我们的result.json文件具有以下json格式的内容-

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

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

将数据传递到服务器

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

例

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

现场演示
The jQuery Example
      
        
      
   
    
   
      
Enter your name and click on the button:

      

        
      

         STAGE

这是在result.php脚本中编写的代码-

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

jQuery AJAX方法

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

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事件

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

您可以阅读所有AJAX事件。

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.