ExtJs 入门教程二十[数据交互：AJAX]

最新推荐文章于 2021-08-06 05:19:40 发布

u014490157

最新推荐文章于 2021-08-06 05:19:40 发布

阅读量366

点赞数

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 }