无废话ExtJs 入门教程二十[数据交互：AJAX]
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.效果如下：
无废话ExtJs 入门教程二十[数据交互：AJAX]的更多相关文章
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二[Hello World]
无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
随机推荐
- javascript学习笔记10----字符串的基本操作
1.字符串的基本操作如下: 定义字符串: var str = "Hello World!" 字符串的基本操作如下: str.length-----返回字符串长度,这里返回12 st ...
- transform
{ transform: scale3d(x,y,z) /*放大*/ translate3d(x,y,z) /*位置*/ rotate3d(x,y,z,angle) /*旋转*/ skew(x-ang ...
- 关于Java集合的小抄
在尽可能短的篇幅里,将所有List.Map.Set.Queue的特征与实现方式捋一遍.适合所有"精通Java"其实还不那么自信的人阅读. List ArrayList 以数组实现. ...
- IIS错误处理集合
1.编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\ya ...
- html5中新增非主体结构元素
1.header元素 定义HTML文档的页眉,是一种具有引导和导航作用的结构元素 <header> <h1>header元素</h1> <nav> &l ...
- C# 自定义Section
一.在App.config中自定义Section,这个使用了SectionGroup <?xml version="1.0" encoding="utf-8&quo ...
- angularjs 中state.go 跳转并且打开新的浏览器窗口
包子最近遇到业务人员提的非常无厘头的需求,就是调页面的时候,一定要打开一个新的浏览器窗口...>o<奇葩!!! 但是我的页面都是state.go跳转的呀,我各种百度,发现,貌似state, ...
- java生产者/消费者模式实现——一生产者一消费者（操作值）
胶多不粘话多不甜,直接上代码: 生产者类: /** * Created by 51304 on 2016/2/28. */ public class P { private String lock; ...
- Linux下忘记MySQL的root密码的解决方法
恢复方法之一 1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也 ...
- Memcached集群/分布式/高可用 及 Magent缓存代理搭建过程 详解
当网站访问量达到一定时,如何做Memcached集群,又如何高可用,是接下来要讨论的问题. 有这么一段文字来描述“Memcached集群” Memcached如何处理容错的? 不处理!:) 在memc ...