用load方法的完整格式是：load( url, [data], [callback] ),
其中:
•url：是指要导入文件的地址。
•data：可选参数；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。
•callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。
直接上代码：
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <script src="jquery.js"></script> <script> $(document).ready(function(){ $('#but').click(function(){ $('#test').load("111.txt"); }); }); </script> <button id="but">改变文本</button> <div id="test"><h2>通过 AJAX 改变文本</h2></div> </BODY> </HTML> |
|
自己在本地要有jquery.js和111.txt文本文档哦，这个文本文档要有内容！
筛选载入的HTML文档
在load的url里加上空格后面就可以跟选择器了。
例如：
| 代码如下 | 复制代码 |
|
$("body").load("test.html #a"); |
|
上个例子是将test.html页面的内容都加载到id为“resText”的元素里。如果只需要加载test.html页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。通过为URL参数指定选择符，可以很方便地从加载过来的HTML文档里筛选出所需要的内容。
load()方法的URL参数的语法结构为：“url selector”。注意，URL和选择器之间有一个空格。
例如只需要加载test.html页面中class为“para”的内容，可以使用以下代码来完成：
| 代码如下 | 复制代码 |
| $("#resText").load("test.html .para"); | |
传递方式
load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST方式。
| 代码如下 | 复制代码 |
|
//无参数传递，则是GET方式 $("#resText").load("test.php",function(){ //...... }); //有参数传递，则是POST方式 $("#resText").load("test.php",{name:"xht555",age:"24"},function(){ //...... }); |
|
如何使用callback
比如我们要在load方法得到服务器响应后，慢慢地显示加载的内容，就可以使用callback函数。代码如下：
| 代码如下 | 复制代码 |
|
$("#go").click(function(){ $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){ $("#myID").fadeIn('slow');} ); }); |
|