jQuery第五課：Ajax

最後更新：2018-12-05 來源：互聯網

上載者：User

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

關於ajax早已不是新鮮話題，而jQuery使ajax變得無比簡單。jQuery提供了若干個ajax函數，他們大同小異，只是為了處理不同類型的資料而分開來。最簡單的是get(url,parameters,callback),這個函數發起一個GET請求，將伺服器返回的資料傳遞給callback處理。下面的例子實現了當滑鼠懸浮在超連結上的時候，就發起一個ajax請求，從伺服器端返回關於此超連結的更多介紹的效果。先看伺服器端代碼，建立一個ajaxload.ashx,僅作為樣本，獲得查詢參數為word的值，並返回：

<%@ WebHandler Language="C#" Class="ajaxload" %>using System;using System.Web;public class ajaxload : IHttpHandler {        public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        string word = context.Request.Params["word"];        context.Response.Write(string.Format("<p style='color:red;'>More intorduction of {0} is here....</p>",word));    }     public bool IsReusable {        get {            return false;        }    }}

前台代碼如下：

<head>    <title>Ajax Text</title>     <script type="text/javascript" src="jquery-1.3.2.js"></script>    <script type="text/javascript">        $(function() {            $('a').hover(function(event) {                $.get('ajaxload.ashx', { word: $(event.target).html() }, function(data) {                    $('#result').html(data);                });            }, function() {                $('#result').html("");            });        });    </script></head><body><a href="javascript:void(0)">China</a><br /><a href="javascript:void(0)">USA</a><br /><a href="javascript:void(0)">Japan</a><br /><a href="javascript:void(0)">中 國</a><br /><div id="result"></div></body>

將滑鼠依次滑過Japan和中國，在firebug中可以清楚的看到發起了兩次get請求。jquery將參數編碼後傳遞給伺服器。在jQuery的協助下，ajax如此簡單。

在此例中，伺服器端返回了一個html片段，前台所作的工作就是把這個html片段插入到頁面中去，實際上，伺服器端返回的可以是任何格式的資料，只要在前台做相應的處理即可。在各種資料格式中，尤為常用的是JSON格式。關於JSON格式本身，本文不多做介紹。簡單說，JSON格式非常類似於javascript中的對象字面量。{}表示一個對象，[]表示一個數組。

下面來實現一個三級聯動下拉式功能表。先看下最終效果：

這是一個搭售方案商品選取器，先選擇第一個屬性Game，再選擇Server，最後選擇Amount。伺服器端如何從資料庫尋找到合適的資料並且如何將其序列化成JSON資料不是本文討論的重點。伺服器端能響應如下請求，返回的資料也能看到，這些是JSON的典型格式：

第一個請求返回Game的列表，第二個請求返回Server的列表，第三個稍微複雜一點，返回了很多資訊，其中DisplayName是用來顯示在列表中的，ID是列表的value值，其餘的沒有用到。例如：

<p>

Amount:<select name="SelectAmount" id="SelectAmount"><option value="45">10 Mil</option>

</p>

下面介紹前台的實現。下拉式清單方塊的HTML代碼如下：

<div id="bannerLivechat_content">                <p>                    Game:<select id="SelectGame"></select></p>                <p>                    Server:<select id="SelectServer"></select></p>                <p>                    Amount:<select id="SelectAmount" name="SelectAmount"></select></p>                <p>                    <asp:Button ID="ButtonFasyBuy" CssClass="btn_default" runat="server" Text="BuyNow"                        OnClick="ButtonFasyBuy_Click" />                </p>            </div>

為三個下拉式清單寫好事件處理函數，首先要載入Game列表：

function LoadGame() {             $.getJSON('FastBuy.ashx', function(data) {                 var sel = $('#SelectGame')[0];                 sel.innerHTML = "";                 $.each(data, function(entryIndex, entry) {                     var op = new Option(entry);                     sel.options.add(op);                 });                 $('#SelectGame')[0].selectedIndex = 0;                 var game = $('#SelectGame').val();                 LoadServer(game);             });         }首先清空當前列表，$.each函數能夠遍曆第一個參數中的每個值，依次調用第二個參數的函數。並把值傳給entry參數。此時jQuery已經把JSON資料解析成javascript對象，這裡是一個字串的數組。

         function LoadServer(game) {             $.getJSON('FastBuy.ashx',{Game:game},function(data) {                 var sel = $('#SelectServer')[0];                 sel.innerHTML = "";                 $.each(data, function(entryIndex, entry) {                     var op = new Option(entry);                     sel.options.add(op);                 });                 $('#SelectServer')[0].selectedIndex = 0;                 LoadAmount(game, $('#SelectServer').val());             });         }載入Server資料的過程是類似的。

         function LoadAmount(game, server) {             $.getJSON('FastBuy.ashx', {Game:game,Server:server}, function(data) {                 var sel = $('#SelectAmount')[0];                 sel.innerHTML = "";                 $.each(data, function(entryIndex, entry) {                     var op = new Option(entry['AmountAttr'], entry['ID']);                     sel.options.add(op);                 });             });         }

最後是載入Amount，這裡稍微有一點不同，此時data中的資料不是簡單的字串了，而是一個有屬性的對象，可以用entry[‘ID‘]這樣的運算式來擷取運算式。在這個例子中，entry[‘ID‘]就是一個簡單的數字了。當然它完全可以是另一個複雜的對象或者數組，依伺服器返回的JSON資料而定。

有了這些準備工作，我們只要在ready函數中為下拉式清單註冊下處理函數了：

$(document).ready(function() {                    $('#SelectServer').change(function() {                LoadAmount($('#SelectGame').val(), $('#SelectServer').val());            });            $('#SelectGame').change(function() {                                 LoadServer($('#SelectGame').val());            });            LoadGame();         });

至此，一個三級聯動下拉單完成了。

jQuery還有一個$.post函數，用法和get一樣，只是它發起的是post請求。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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