利用JQuery的load函数动态加载页面以及jQuery动态加载页面和请求所返回的数据收藏 jQuery动态加载页面和请求所返回的数据...

最新推荐文章于 2023-04-10 16:58:36 发布

happmaoo

最新推荐文章于 2023-04-10 16:58:36 发布

阅读量263

点赞数

文章标签： jQuery 数据结构 JavaScript CSS Ajax ViewUI

利用JQuery的load函数动态加载页面

JQuery有好多Ajax函数，其中load是用来动态加载一个页面的内容到指定的dom元素上。

我们来做个例子：
做一个上下（左右）结构的页面，其中下左部分放2个以前我们做过的div按钮，下右部分则为动态加载内容。
按每个按钮，加载该按钮相应的网页内容到下右区域。

基本语法为：
$('#区域id').load('页面名称');

完整的网页代码如下：

< 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 : 1pxsolid#eee ;
}
.buttonListArea {
float : left ;
width : 150px ;
padding-right : 10px ;
border-right : 1pxsolid#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 > JQueryLoadExample </ h2 >
</ div >

< div class ="buttonListArea" >
< div class ="buttonArea" >
< div class ="button" id ="btnLoad1" > Load1 </ div >
</ div >

< div class ="buttonArea" >
< div class ="button" id ="btnLoad2" > Load2 </ div >
</ div >
</ div >

< div id ="load_content" >
< h2 > 这是要被加载的区域 </ h2 >
</ div >

</ div >

</ form >

</ body >
</ html >

---------------------------------------------------------------------------------------------------------------------------------------------

jQuery动态加载页面和请求所返回的数据

Default.aspx页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="jquery-1.3.2.mini.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function loadData()
{
//加载a.html到层
$("#divData").load("a.html");
//加载从data.ashx返回的数据到层
//$.get("data.ashx", function(data){$("#divData").html(data);});
//alert返回的数据
//$.get("data.ashx", function(data){alert("Data Loaded: " + data);});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="javascript:void(0);" onclick="loadData();">请求加载</a>
<span id="divData"></span>
</div>
</form>
</body>
</html>

data.ashx

<%@ WebHandler Language="C#" Class="data" %>

using System;
using System.Web;

public class data : IHttpHandler {

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
}

public bool IsReusable {
get {
return false;
}
}

}