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

来源：互联网发布：51单片机延时1s的程序编辑：程序博客网时间：2024/06/12 23:10

利用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);" 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;
        }
    }

}

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

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

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

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