无废话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用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
随机推荐
- Extjs 知识体系1-dom操作
操作dom 主要是Ext.element,主要是简单的操作 Ext.dom.CompositeElement // 操作dom集合 ps:Extjs 使用字面量{} 形式,不支持链式操作 一.获取元素 ...
- TypeScript Writing .d.ts files(编写声明文件)
当使用扩展的JavaScript库或者插件API的时候,将需要使用声明文件(.d.ts)来描述库的类型.本文内容将包括如何编写声明文件相关的一些高级概念,然后用一些例子来展示如何将各式各样的概念与声明 ...
- Python Day10
进程 在python中multiprocess模块提供了Process类,实现进程相关的功能.但是,由于它是基于fork机制的,因此不被windows平台支持.想要在windows中运行,必须使用if ...
- 自学 Java 怎么入门
自学 Java 怎么入门? 595赞同反对,不会显示你的姓名 给你推荐一个写得非常用心的Java基础教程:java-basic | 天码营 这个教程将Java的入门基础知识贯穿在一个实例中,逐 ...
- springmvc @PathVariable("b") double b 丢失精度问题
Spring MVC从3.0开始支持REST,而主要就是通过@PathVariable来处理请求参数和路径的映射.由于考虑到SEO的缘故,很多人喜欢把新闻的名称作为路径中的一部分去处理,这时候中文的名 ...
- postgresql:pgadmin函数调试工具安装过程
通过安装第三方插件pldebugger,可实现在pgadmin客户端对函数设置断点.调试,具体过程如下: 1.下载pldebugger安装包:http://git.postgresql.org/git ...
- 使用excel结合线性规划求解Holt-Winters参数
其实上面这个是Holt-Winters无季节趋势模型, 上面的S(t)对应下面的a(t)——截距(平滑值) b(t)仍然对应b(t)——趋势,T对应k. ...
- openjdk 完全编译指南
从openjdk.java.net下载openjdk的软件包,你就获得了所有相关的源码. 强烈建议首先仔细看懂 README-builds.html 指南. 在执行 make all 之前,首先要 执 ...
- Android网络请求通信之Volley
一.Volley简介 Volley网络框架是Google公司在2013年发布的一款Android平台上的网络请求通信库.以下是对Volley的简单归纳. Volley的优点: 使网络通信更快.更简单. ...
- Coursera系列-R Programming-Final Week-Assignment3 & 总结
博客总目录,记录学习R与数据分析的一切:http://www.cnblogs.com/weibaar/p/4507801.html ------- 经过周末一个半天的努力,终于把这次的Assignm ...