JQuery有好多Ajax函數(shù)，其中l(wèi)oad是用來(lái)動(dòng)態(tài)加載一個(gè)頁(yè)面的內(nèi)容到指定的dom元素上。
我們來(lái)做個(gè)例子：
做一個(gè)上下（左右）結(jié)構(gòu)的頁(yè)面，其中下左部分放2個(gè)以前我們做過(guò)的div按鈕，下右部分則為動(dòng)態(tài)加載內(nèi)容。
按每個(gè)按鈕，加載該按鈕相應(yīng)的網(wǎng)頁(yè)內(nèi)容到下右區(qū)域。
基本語(yǔ)法為：
$('#區(qū)域id').load('頁(yè)面名稱(chēng)');
完整的網(wǎng)頁(yè)代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>JQuery - Load</title>
<link rel="stylesheet" media="all" type="text/css" href="../CSS/myStyle.css" />
<script type="text/javascript" src="../JsLib/jquery-1.3.2.min.js"></script>//必須，且在某目錄下要存在
<script type="text/javascript" src="../JS/basicEffect.js"></script>//必須，且在某目錄下要存在
<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;
}
.buttonArea {
margin: 10px;
padding-bottom:20px;
}
#load_content {
float: left;
width: 550px;
text-align:center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#btnLoad1.button').click(function() {
$('#load_content').load('loadContent1.htm');
});
$('#btnLoad2.button').click(function() {
$('#load_content').load('loadContent2.htm');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header">
<h2>JQuery Load Example</h2>
</div>
<div class="buttonListArea">
<div class="buttonArea">
<div class="button" id="btnLoad1">Load 1</div>
</div>
<div class="buttonArea">
<div class="button" id="btnLoad2">Load 2</div>
</div>
</div>
<div id="load_content">
<h2>這是要被加載的區(qū)域</h2>
</div>
</div>
</form>
</body>
</html>
