您的位置：首页 > Web前端 > JQuery

Jquery异步加载页面（load）

2010-05-21 16:37 585 查看

想实现Jquery 加载完页面内容再显示出内容来吗？使用 load函数即可实现

2010-05-21

话不多说，上图先。

第一步：

第二步点击“load 1“按钮。出现"正在加载..."

第三步：加载完成

JS代码：

$(document).ready(function() {
$('#btnLoad1.button').click(function() {
$('#header').html("正在加载...");
//$('#load_content').load('http://jqueryui.com/', );
$('#load_content').hide().load('http://www.baidu.com', function(responseText, textStatus, XMLHttpRequest) {
//所有状态成功，执行此函数，显示数据  //textStatus四种状态 success、error、notmodified、timeout
if (textStatus == "error") {
var msg = "错误: ";
$('#header').html(msg + XMLHttpRequest.status + " " + XMLHttpRequest.statusText);
}
else if (textStatus == "timeout") {
var msg = "操时: ";
$('#header').html(msg + XMLHttpRequest.status + " " + XMLHttpRequest.statusText);
}
else {
$('#header').html("加载完成");
$(this).fadeIn();
}
});
});
});

HTML代码：

<!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 runat="server">
<title>JQuery - Load</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>
<mce:style type="text/css"><!--
#header
{
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #eee;
}
.buttonListArea
{
float: left;
width: 150px;
padding-right: 10px;
border-right: 1px solid #eee;
margin-right: 10px;
}
.button
{
cursor:pointer;
}

.buttonArea
{
margin: 10px;
padding-bottom: 20px;
}
#load_content
{
float: left;
width: 550px;
text-align: center;
}

--></mce:style><style type="text/css" mce_bogus="1">        #header
{
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #eee;
}
.buttonListArea
{
float: left;
width: 150px;
padding-right: 10px;
border-right: 1px solid #eee;
margin-right: 10px;
}
.button
{
cursor:pointer;
}

.buttonArea
{
margin: 10px;
padding-bottom: 20px;
}
#load_content
{
float: left;
width: 550px;
text-align: center;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header">
<h2>加载演示</h2>
</div>
<div class="buttonListArea">
<div class="buttonArea">
<div class="button"  id="btnLoad1"> Load 1</div>
</div>
</div>
<div id="load_content">
<h2>这是要被加载的区域</h2>
</div>
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Jquery异步加载页面（load）

2010-05-21

话不多说，上图先。

第一步：

第二步 点击“load 1“按钮。出现"正在加载..."

第三步：加载完成

第二步点击“load 1“按钮。出现"正在加载..."