利用JQuery的load函式動態載入頁面 以及jQuery動態載入頁面和請求所返回的資料

sage425發表於2010-11-22
jQuery函式

 

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

}

 

相關文章