您的位置：首页 > Web前端 > JavaScript

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

2013-11-22 10:49 651 查看
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.效果如下：



 转载请注明出处：http://www.cnblogs.com/iamlilinfeng
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  数据交互ajaxextjs
相关文章推荐
新的分享
章节导航