无废话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用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
随机推荐
- Message启动菜单个性化制作工具V1.0.3.1最终版
特点及功能 1.可以全新制作Message启动菜单文件!也可以选择修改已存在的菜单文件,制作或预览时会提示以哪个菜单版本为核心启动菜单. 2.支持更换背景图片,也支持图片标准化防止启动时黑屏,在选择背 ...
- C#操作剪贴板
操作剪贴版,主要用到了ClipBoard类. 该类位于 System.Windows(WPF)或System.Windows.Forms(Winform)下. 1.设置内容到剪贴版上: 主要用到Cli ...
- web前端基础知识-（三）JavaScript基本操作
JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. JavaScrip ...
- 10月30日上午MySQL数据库的修改（从网页上实现对数据库的更改）
从网页页面上对数据库进行更改,连接着之前做的增加.删除.查询. 1.先做一个修改页面 <body> <!--这个页面需要让用户看到一些数据,所以不是一个纯php页面,页面效果和增加页 ...
- Django基础，Day9 - 静态文件目录与路径设置说明(eg. images, JavaScript, CSS)
静态文件路径设置官方说明 1. Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS. 2. In ...
- html5 新选择器 querySelector querySelectorAll
querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...
- 浅谈Android中layout_weight
引言 在开发android过程中,我们经常需要对界面进行按比例进行布局,我们一般都会使用layout_属性来进行设置.今天这篇文章我们就来简单介绍下layout_weight的使用和布局原理.随着做项 ...
- 莫比乌斯环-vtkTriangleStrip
#ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE_INIT(vtkRend ...
- 前端学习笔记 - Css初级篇
有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...
- PHP开发程序应该注意的42个优化准则
PHP 独特的语法混合了 C.Java.Perl 以及 PHP 自创新的语法.它可以比 CGI或者Perl更快速的执行动态网页.用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML ...