jQuery - 概述

jQuery - Ajax

← 上一节 下一节 →

AJAX是Asynchronous JavaScript和XML的缩写，这项技术可以帮助我们在没有浏览器页面刷新的情况下从服务器加载数据.

如果你是AJAX的新手，我会建议您在继续之前阅读我们的 Ajax教程.

JQuery是一个很棒的工具，提供了一组丰富的AJAX方法来开发下一代Web应用程序.

加载简单数据

这很容易加载任何静态或动态数据使用JQuery AJAX. JQuery提供 load()方法来完成工作 :

语法

这是

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


以下是所有参数的说明 :

  • 网址 : 发送请求的服务器端资源的URL.它可以是动态生成数据或从数据库生成数据的CGI，ASP，JSP或PHP脚本.

  • 数据 : 此可选参数表示一个对象，其属性被序列化为要传递给请求的正确编码参数.如果指定，则使用 POST 方法发出请求.如果省略，则使用 GET 方法.

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

示例

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

在线演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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 &minus;</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>


此处 load()向指定的网址发起Ajax请求/jquery/result.html 文件.加载此文件后，所有内容都将填充在< div>内.用ID stage 标记.假设，我们的/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字符串所产生的数据值作为第一个参数传递给此回调，状态作为第二个参数传递.

Example

考虑使用小型JQuery编码的以下HTML文件 :

在线演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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 &minus;</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阶段的<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://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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方法，您可以根据您的编程需要使用

Sr.No.方法&说明
1jQuery.ajax(options)

使用HTTP请求加载远程页面.

2jQuery.ajaxSetup(options)

设置AJAX请求的全局设置.

3jQuery.get(url，[data]，[callback]，[type])

使用HTTP GET请求加载远程页面.

4jQuery.getJSON(url，[data]，[callback])

使用HTTP GET请求加载JSON数据.

5jQuery.getScript(url，[callback])

使用HTTP GET请求加载并执行JavaScript文件.

6jQuery.post(url，[data]，[callback]，[type])

使用HTTP POST请求加载远程页面.

7load(url，[data]，[callback])

从远程文件加载HTML并将其注入DOM.

8serialize()

将一组输入元素序列化为一串数据.

9serializeArray()

序列化所有表单和表单元素，如.serialize()m ethod但返回一个JSON数据结构供您使用.

JQuery AJAX事件

您可以在AJAX调用进度的生命周期中调用各种JQuery方法.根据不同的事件/阶段，可以使用以下方法和减去;

您可以浏览所有 AJAX事件.

Sr.No.方法&说明
1ajaxComplete(callback)

在AJAX请求完成时附加要执行的函数.

2ajaxStart(callback)

附加一个要在AJAX请求开始时执行的函数，并且没有任何已经激活的函数.

3ajaxError(callback)

在AJAX请求失败时附加要执行的函数.

4ajaxSend(callback)

在发送AJAX请求之前附加要执行的函数.

5ajaxStop(callback)

在所有AJAX请求结束时附加要执行的函数.

6ajaxSuccess(callback)

在AJAX请求成功完成时附加要执行的函数.

← 上一节 下一节 →

相关菜鸟教程