首頁 > 開發者 > Ajax

基於jQuery的AJAX和JSON實現純html資料範本

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

通過jQuery內建的AJAX功能，直接存取後台獲得JSON格式的資料，然後通過jQuer把資料繫結到事先設計好的html模板上，直接在頁面上顯示。
我們先來看一下html模板：
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <tr>
                    <th>
                        訂單ID</th>
                    <th>
                        客戶ID</th>
                    <th>
                        僱員ID</th>
                    <th>
                        訂購日期</th>
                    <th>
                        發貨日期</th>
                    <th>
                        貨主名稱</th>
                    <th>
                        貨主地址</th>
                    <th>
                        貨主城市</th>
                    <th>
                        更多資訊</th>
                </tr>
                <tr id="template">
                    <td id="OrderID">
                    </td>
                    <td id="CustomerID">
                    </td>
                    <td id="EmployeeID">
                    </td>
                    <td id="OrderDate">
                    </td>
                    <td id="ShippedDate">
                    </td>
                    <td id="ShippedName">
                    </td>
                    <td id="ShippedAddress">
                    </td>
                    <td id="ShippedCity">
                    </td>
                    <td id="more">
                    </td>
                </tr>
            </table>

  
        一定要注意的就是裡面所有的id屬性，這個是一個關鍵。再來看一下AJAX請求和綁定資料的代碼。
$.ajax(...{
            type: "get",//使用get方法訪問後台
            dataType: "json",//返回json格式的資料
            url: "BackHandler.ashx",//要訪問的後台地址
            data: "pageIndex=" + pageIndex,//要發送的資料
            complete :function()...{$("#load").hide();},//AJAX請求完成時隱藏loading提示
            success: function(msg)...{//msg為返回的資料，在這裡做資料繫結
                var data = msg.table;
                $.each(data, function(i, n)...{
                    var row = $("#template").clone();
                    row.find("#OrderID").text(n.訂單ID);
                    row.find("#CustomerID").text(n.客戶ID);
                    row.find("#EmployeeID").text(n.僱員ID);
                    row.find("#OrderDate").text(ChangeDate(n.訂購日期));
                    if(n.發貨日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.發貨日期));
                    row.find("#ShippedName").text(n.貨主名稱);
                    row.find("#ShippedAddress").text(n.貨主地址);
                    row.find("#ShippedCity").text(n.貨主城市);
                    row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.訂單ID + "&pageindex="+pageIndex+">&nbsp;More</a>");                   
                    row.attr("id","ready");//改變綁定好資料的行的id
                    row.appendTo("#datas");//添加到模板的容器中
                });
        這個是jQuery的AJAX方法，返回資料並不複雜，主要說明一下怎麼把資料按模板的定義顯示到到頁面上。首先是這個“var row = $("#template").clone();”先把模板複製一份，接下來row.find("#OrderID").text(n.訂單ID);，表示找到id=OrderID的標記，設定它的innerText為相應的資料，當然也可以設定為html格式的資料。或者是通過外部的函數把資料轉換成需要的格式，比如這裡row.find("#OrderDate").text(ChangeDate(n.訂購日期));有點伺服器控制項做模板綁定資料的感覺。
       
        所有的這些，都是放在一個靜態頁面裡，只通過AJAX方法從後台擷取資料，所有html代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test1</title>
    <script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
    <script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
</head>
<body>
    <div>
        &nbsp;<div>
            <br />
            <input id="first" type="button" value=" << " /><input id="previous" type="button"
                value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button"
                    value=" >> " />
            &nbsp;<span id="pageinfo"></span>
            <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <tr>
                    <th>
                        訂單ID</th>
                    <th>
                        客戶ID</th>
                    <th>
                        僱員ID</th>
                    <th>
                        訂購日期</th>
                    <th>
                        發貨日期</th>
                    <th>
                        貨主名稱</th>
                    <th>
                        貨主地址</th>
                    <th>
                        貨主城市</th>
                    <th>
                        更多資訊</th>
                </tr>
                <tr id="template">
                    <td id="OrderID">
                    </td>
                    <td id="CustomerID">
                    </td>
                    <td id="EmployeeID">
                    </td>
                    <td id="OrderDate">
                    </td>
                    <td id="ShippedDate">
                    </td>
                    <td id="ShippedName">
                    </td>
                    <td id="ShippedAddress">
                    </td>
                    <td id="ShippedCity">
                    </td>
                    <td id="more">
                    </td>
                </tr>
            </table>
        </div>
        <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
            LOADING....
        </div>
        <input type="hidden" id="pagecount" />
    </div>
</body>
</html>
    PageData.js就是包括上面AJAX請求和綁定資料代碼的js，整個頁面連form都不用，這樣做有什麼好處呢。再看下面一個模板
            <ul id="datas">
                <li id="template">
                    <span id="OrderID">
                        fsdfasdf
                    </span>
                    <span id="CustomerID">
                    </span>
                    <span id="EmployeeID">
                    </span>
                    <span id="OrderDate">
                    </span>
                    <span id="ShippedDate">
                    </span>
                    <span id="ShippedName">
                    </span>
                    <span id="ShippedAddress">
                    </span>
                    <span id="ShippedCity">
                    </span>
                    <span id="more">
                    </span>
                </li>
            </ul>
    還是要注意id屬性。大家看到這裡應該明白了，不管用什麼樣的表現形式，只要id屬性相同，就可以把資料繫結到對應的位置。這樣的話，我們這些做程式的就不會因為美工的修改而修改代碼了，而且美工也只要做出html就可以了，不需要為伺服器控制項做模板（不過我還沒遇到過這樣的美工，都是美工設計好了我來改成伺服器控制項的模板）。
    再簡單說一下AJAX請求的後台，用的是Access的Northwind資料庫，把訂單表放到DataTable裡，然後通過DataTable2JSON轉化成JSON資料格式傳回來就完了，不過後台用了一些分頁和緩衝的方法，希望對初學者有一些協助。

 

 

 

ps:DataTable轉換成JSON字串的函數

直接分解DataTable，然後用StringBuilder來構造成JSON格式也不是很複雜。函數代碼如下：

    private string DataTable2Json(DataTable dt)
    {
        StringBuilder jsonBuilder = new StringBuilder();
        jsonBuilder.Append("{\"");
        jsonBuilder.Append(dt.TableName);
        jsonBuilder.Append("\":[");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            jsonBuilder.Append("{");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                jsonBuilder.Append("\"");
                jsonBuilder.Append(dt.Columns[j].ColumnName);
                jsonBuilder.Append("\":\"");
                jsonBuilder.Append(dt.Rows[i][j].ToString());
                jsonBuilder.Append("\",");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("},");
        }
        jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
        jsonBuilder.Append("]");
        jsonBuilder.Append("}");
        return jsonBuilder.ToString();
    }
這一行“jsonBuilder.Remove(jsonBuilder.Length - 1, 1);”是為了去掉最後一個多於的逗號

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
jquery unobtrusive ajax min jquery ajax encoding jquery ajax file upload codeigniter jquery ajax jquery ajax rest ajax php json php ajax json
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More