朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
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 IsReusable 16 { 17 get 18 { 19 return false; 20 } 21 } 22 } 23 }
2.效果如下：
