AJAX是异步JavaScript和XML的首字母缩写,该技术可帮助无涯教程从服务器加载数据而无需刷新浏览器页面。
JQuery是一个很棒的工具,它提供了丰富的AJAX方法集来开发下一代Web应用程序。
使用JQuery AJAX加载任何静态或动态数据非常容易。 jQuery提供 load()()方法来完成工作-
这是 load()()方法的简单语法-
[selector].load( URL, [data], [callback] );
这是所有参数的描述-
URL - 请求发送到的服务器端资源的URL。它可以是CGI,ASP,JSP或PHP脚本,可以动态生成数据或从数据库中生成数据。
data - 此可选参数表示一个对象,其属性被序列化为正确编码的参数,以传递给请求。
callback - 在将响应数据加载到匹配集合的元素中之后调用的回调函数。第一个参数是从服务器接收到的响应文本,第二个参数是状态码。
考虑以下带有小的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 −</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阶段标签的<div>中。 假设无涯教程的/jquery/result.html文件只有一行HTML行-
<h1>THIS IS RESULT...</h1>
单击给定按钮时,将加载result.html文件。
运行上面代码输出
服务器可能会针对您的请求返回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://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 -</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://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; } ?>
运行上面代码输出
现在,您可以在给定的输入框中输入任何文本,然后单击"Show Result"按钮以查看在输入框中输入的内容。
您已经了解了使用JQuery进行AJAX的基本概念。下表列出了所有重要的JQuery AJAX方法,您可以根据编程需要使用它们-
Sr.No. | Methods & Remark |
---|---|
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( ) 序列化所有表单和表单元素(如.serialize()方法),但返回JSON数据结构供您使用。 |
您可以在AJAX调用进度的生命周期中调用各种JQuery方法。基于不同的事件/阶段,可以使用以下方法-
Sr.No. | Methods & Remark |
---|---|
1 |
ajaxComplete( callback ) 附加每当AJAX请求完成时要执行的函数。 |
2 |
ajaxStart( callback ) 附加一个函数,只要AJAX请求开始且尚无活动,该函数即可执行。 |
3 |
ajaxError( callback ) 附加一个在AJAX请求失败时要执行的函数。 |
4 |
ajaxSend( callback ) 在发送AJAX请求之前,附加要执行的函数。 |
5 |
ajaxStop( callback ) 附加所有AJAX请求结束后要执行的函数。 |
6 |
ajaxSuccess( callback ) 附加每当AJAX请求成功完成时要执行的函数。 |
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)