無廢話ExtJs 入門教程二十[資料互動：AJAX]

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

上載者：User

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

1.代碼如下：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <title></title>  5     <!--ExtJs架構開始-->  6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>  7     <script type="text/javascript" src="/Ext/ext-all.js"></script>  8     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />  9     <!--ExtJs架構結束--> 10     <script type="text/javascript"> 11         Ext.onReady(function () { 12             //建立panel 13             var panel = new Ext.Panel({ 14                 title: 'Ajax與資料顯示', 15                 width: 200, 16                 height: 200, 17                 frame: true 18             }); 19             //建立資料顯示模板 20             var template = new Ext.XTemplate( 21                         '<table  id="template">', 22                            '<tr><td>編號:</td><td>{id}</td></tr>', 23                            '<tr><td>姓名:</td><td>{name}</td></tr>', 24                            '<tr><td>生日:</td><td>{brithday}</td></tr>', 25                            '<tr><td>身高:</td><td>{height}</td></tr>', 26                            '<tr><td>性別:</td><td>{sex}</td></tr>', 27                            '<tr><td valign="top">描述:</td><td>{discribe}</td></tr>', 28                         '</table>' 29                     ); 30             //擷取資料 31             Ext.Ajax.request({ 32                 url: '/App_Ashx/Demo/Ajax.ashx', 33                 method: 'post', 34                 params: { id: 1 }, 35                 success: function (response, options) { 36                     for (i in options) { 37                         alert('options參數名稱:' + i); 38                         alert('options參數[' + i + ']的值：' + options[i]); 39                     } 40                     var responseJson = Ext.util.JSON.decode(response.responseText); 41                     template.compile(); 42                     template.overwrite(panel.body, responseJson); 43                 }, 44                 failure: function () { 45                     alert('系統出錯，請聯絡管理員！'); 46                 } 47             }); 48             //建立表單 49             var win = new Ext.Window({ 50                 title: '視窗', 51                 id: 'window', 52                 width: 476, 53                 height: 374, 54                 resizable: true, 55                 modal: true, 56                 closable: true, 57                 maximizable: true, 58                 minimizable: true, 59                 items: [panel] 60             }); 61             win.show(); 62         }); 63     </script> 64 </head> 65 <body> 66     <!-- 67 說明： 68 (1)var template = new Ext.XTemplate():建立模板對象，常用於資料顯示，也就是我們在開發中提到的“內容頁或詳細頁”。 69 (2)'<tr><td>編號:</td><td>{id}</td></tr>':中間的{id}預留位置要和我們在後台輸出 json 對象對應。 70 (3)Ext.Ajax.request()：建立一個AJAX請求. 71 (4)url: '/App_Ashx/Demo/Ajax.ashx'：請求地址。method: 'post'，提交方式，params: { id: 1 }參數，我們在做內容頁時，經常會這樣使用“根據編號取出詳細資料”，這個參數在本例中並沒有實際意義，在這裡只顯示用法。 72 (5)success: function (response, options) {}成功時執行方法。   73    這裡有兩個參數. 74    response：服務端返回的資料，通過response.responseText來獲得XMLHttpRequest的資料，並通過Ext.util.JSON.decode方法把字串轉換成json對象。       75    options：向服務端發送的對象。 76    我們在開發中，經常會遇到這樣的問題，就是不知道參數是做什麼用的，傳的是什麼，當我們 alert(parm)的時候，彈出的是[Object]或是[Object][Object]。 77    那麼我們怎麼樣知道他到底傳的是什麼呢？我在上頁的代碼中寫了這樣的程式： 78      for (i in options) { 79                         alert('options參數名稱:' + i); 80                         alert('options參數[' + i + ']的值：' + options[i]); 81      } 82      對象我們不知道的對象 options 我們用 for 語句進行遍曆，看看對象裡存的是什麼，這樣就可以判斷對象是什麼了。 83      for(){}：不知屬性個數時,用於對某個對象的所以屬性進行迴圈操作,返回字串形式的屬性名稱，擷取屬性值方式。 84      那如果，我們的子物件還是 Object 怎麼辦？ 85      for (i in options) { 86         alert('options參數名稱:' + i); 87         alert('options參數[' + i + ']的值：' + options[i]); 88         //方式一，判斷子物件類型，如果是object則繼續遍曆子物件 89         if (typeof (options[i]) == 'object') { 90             for (j in options[i]) { 91                 alert('子物件名稱：' + j); 92                 alert('子物件值：' + options[i][j]); 93             } 94         } 95         //方式二，options[i].toSource()，查看對象源碼。 96         //文法：object.toSource() 註：該方法在 Internet Explorer 中無效。 97      } 98 (6)template.compile();編譯模板。 99 (7)template.overwrite(panel.body, responseJson)：把資料填充到模板中。100 -->101 </body>102 </html>

服務端代碼/App_Ashx/Demo/Ajax.ashx

 1 using System.Web; 2  3 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo 4 { 5     public class Ajax : IHttpHandler 6     { 7         public void ProcessRequest(HttpContext context) 8         { 9             if (context.Request.Params["id"] != null && context.Request.Params["id"].ToString() == "1")10             {11                 context.Response.Write("{id:1,name:'張三',brithday:2001-01-01,height:178,sex:'0',discribe:'張三是一個.net軟體工程師<br />現在正在學習ExtJs。'}");12             }13         }14 15         public bool IsReusable16         {17             get18             {19                 return false;20             }21         }22     }23 }

2.效果如下：

轉載請註明出處：http://www.cnblogs.com/iamlilinfeng

本文章原先以中文撰寫並發佈於 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