📜  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.