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

最新推荐文章于 2024-04-07 10:27:45 发布

sage425

最新推荐文章于 2024-04-07 10:27:45 发布

阅读量4.4k

点赞数

分类专栏：随笔集 JQuery 文章标签： jquery function stylesheet javascript server button

本文链接：https://blog.csdn.net/sage425/article/details/6026730

版权

随笔集同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

JQuery

11 篇文章 0 订阅

订阅专栏

利用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 : 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 > 这是要被加载的区域 </ 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);" οnclick="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;
        }
    }

}