jquery load是jquery ajax中的一种功能，load可以方便快速的直接加载一个页面到指定p中（html,php），并且它可以带参数，下面我来给大家详细介绍load方法用法.
格式
load(url,data,function(response,status,xhr))
如何使用data
1.加载一个php文件，该php文件不含传递参数
代码如下 复制代码
$(#myid).load(test.php);
//在id为#myid的元素里导入test.php运行后的结果
2. 加载一个php文件，该php文件含有一个传递参数
代码如下 复制代码
$(#myid).load(test.php,{name : adam});
//导入的php文件含有一个传递参数，类似于：test.php?name=adam
或者直接
$(#presult).load(jqueryload?username= + username + &un=+$(#username).val()+×tamp= + (new date()).gettime());
发送参数时，必须对参数进行二次编码操作：
代码如下 复制代码
var username = encodeuri(encodeuri($(#username).val()));
使用 ajax 请求来改变 p 元素的文本：
代码如下 复制代码
$(button).click(function(){
$(p).load('demo_ajax_load.txt');
});
如何使用 callback
比如我们要在load方法得到服务器响应后，慢慢地显示加载的内容，就可以使用callback函数。代码如下：
代码如下 复制代码
$(#go).click(function(){
$(#myid).load(welcome.php, {lname : cai, fname : adam, function(){
$(#myid).fadein('slow');}
);
});
例子
代码如下 复制代码
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jquery load方法 演示</title>
<style type="text/css">
body{
font-family:lucida grande, lucida sans unicode, verdana, arial, helvetica, sans-serif;
font-size:12px;
}
a {color:#fd9602}
a:hover{color:#6b9905}
a:focus {outline: none;}
/* ----------- my form ----------- */
.mybox{
margin:50px auto 0;
width:500px;
padding:0px;
text-align:left;
}
code {
background-color: #f9f9f9;
}
pre {
padding: 5px;
color: #000;
background-color: #ddd;
border: 1px solid #ccc;
line-height: 1.1em;
overflow: auto;
}
</style>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$( document ) . ready (
function() {
$('a.codeexample').each (
function( i ) {
$( this ).after( '<pre class="codeexample"></pre>' );
}
)
$( 'pre.codeexample' ).hide();
$('a.codeexample').toggle (
function() {
if( !this.old ){
this.old = $(this).html();
}
$(this).html('隐藏代码');
parsecode(this);
},
function() {
$(this).html(this.old);
$(this.nextsibling).hide();
}
)
function parsecode(o){
if(!o.nextsibling.hascode){
$.get (o.href,
function(code){
code=code.replace(/&/mg,'&');
code=code.replace(/</mg,'<');
code=code.replace(/>/mg,'>');
code=code.replace(//mg,'"');
code=code.replace(/t/g,' ');
code=code.replace(/r?n/g,'<br>');
code=code.replace(/<br><br>/g,'<br>');
code=code.replace(/ /g,' ');
o.nextsibling.innerhtml=code;
o.nextsibling.hascode=true;
}
);
}
$(o.nextsibling).show();
}
}
)
</script>
</head>
<body>
<p class="mybox">
<h1>jquery load方法 演示</h1>
姓:
<input type="text" style="color:#666" id="lastname" name="lastname" value="" />
<br /><br />
名:
<input type="text" style="color:#666" id="firstname" name="firstname" value="" />
<br /><br />
<button id="go">确定</button>
<p id="myid" style="display:none;"></p>
</p>
<script type="text/javascript">
$(#go).click(function(){
$(#myid).load(welcome.php, {lname : $(#lastname).val(), fname : $(#firstname).val()}, function(){
$(#myid).fadein('slow');}
);
});
</script>
<p style="clear:both"></p>
<p style="width:500px; margin: 20px auto 0; padding:10px; text-align:left;">
<a href="jquery-load-demo.html" class="codeexample">显示代码</a>
</p>
</body>
</html>
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jquery会在所有dom加载完成后再绑定load事件
以上就是jquery load方法用法详解的详细内容。