无废话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用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
随机推荐
- 在哪可以Sigmaplot 13下载免费版的
SigmaPlot是一款科学的数据分析和绘图软件,可以进行精密绘图.数据分析.自动化管理数据和创建网络图表,具备制作和发行品质图表的水平,该软件被广泛地运用在多个领域.现今SigmaPlot软件日益受 ...
- 8.Android 系统状态栏沉浸式/透明化解决方案
转载:http://www.jianshu.com/p/34a8b40b9308 前言 网上已经有很多有关于系统状态栏的解决方案,这篇文章也不会有什么新奇的解决方案,都是本人经过自己试验,统计提炼出来 ...
- css-margin与百分数的关系
可以对元素的margin设置百分数,百分数是相对于父元素的width计算,不管是margin-top/margin-bottom还是margin-left/margin-right.(padding同 ...
- Nginx编译配置杂记
1.http://nginx.org/download/nginx-1.6.3.tar.gz 2. [root@track nginx-1.6.3]#./configure --prefix=/usr ...
- POJ 3349 Snowflake Snow Snowflakes（简单哈希）
Snowflake Snow Snowflakes Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 39324 Accep ...
- C# 的TCP Socket （同步方式）
简单的c# TCP通讯(TcpListener) C# 的TCP Socket (同步方式) C# 的TCP Socket (异步方式) C# 的tcp Socket设置自定义超时时间 C# TCP ...
- Shell文件权限和脚本执行
一.预备知识 1.shell的作用 2.常识 (1)Tab键自动补全 使用Terminal时,输入命令的前几个字母,敲tab会自动补全命令或文件名.目录等. 好处:操作速度更快:不容易出错: ...
- sublime text3好用的插件
1.安装package control sublime text3 的安装方法,ctrl+`,调出控制台输入 import urllib.request,os; pf = 'Package Contr ...
- [Nhibernate]一级缓存
目录 写在前面 文档与系列文章 一级缓存 一个例子 一级缓存管理 总结 写在前面 上篇文章介绍了nhibernate中对象的三种状态,通过对象的三种状态,很容易想到缓存. 什麽是缓存? 有时候,某些数 ...
- Excel 函数VLOOKUP初学者使用指南
1.基础说明 =VLOOKUP(lookup_value,tabble_array,col_index_num,(range_lookup)) lookup_value:用什么查找 tabble_ar ...