ExtJS4.1:AJAX提交数据的三种方式,80%人都没用过第三种

简介: 原文 http://www.cnblogs.com/happyframework/archive/2013/04/27/3046810.html 参考资料 HTTP:https://zh.wikipedia.

原文 http://www.cnblogs.com/happyframework/archive/2013/04/27/3046810.html

参考资料

HTTP:https://zh.wikipedia.org/wiki/HTTP

MIME:https://zh.wikipedia.org/wiki/MIME

国内博文:http://blog.csdn.net/gueter/article/details/1524447

第一种方式

示例代码

复制代码
 1 var data = {
 2     name: '段光伟',
 3     email: 'shijiucha@qq.com'
 4 };
 5 
 6 Ext.Ajax.request({
 7     url: '../handlers/GetData.ashx',
 8     method: 'GET',
 9     params: { users: Ext.encode(data) }
10 });
复制代码

 执行结果

服务器端代码

1 context.Response.Write(context.Request.QueryString["users"]);

第二种方式

示例代码

复制代码
 1 var data = {
 2     name: '段光伟',
 3     email: 'shijiucha@qq.com'
 4 };
 5 
 6 Ext.Ajax.request({
 7     url: '../handlers/GetData.ashx',
 8     method: 'POST',
 9     params: { users: Ext.encode(data) }
10 });
复制代码

执行结果

服务器端代码

1 context.Response.Write(context.Request.Form["users"]);

第三种方式

示例代码

复制代码
 1 var data = {
 2     name: '段光伟',
 3     email: 'shijiucha@qq.com'
 4 };
 5 
 6 Ext.Ajax.request({
 7     url: '../handlers/GetData.ashx',
 8     method: 'POST',
 9     jsonData: data
10 });
复制代码

 执行结果

服务器端代码

1 StreamReader sr = new StreamReader(context.Request.InputStream);
2 context.Response.Write(sr.ReadToEnd());

ExtJs中Proxy的配置

配置为第一种方式的代码

复制代码
 1 Ext.define('Demo.model.User', {
 2     extend: 'Ext.data.Model',
 3     fields: [
 4         { name: 'name' },
 5         { name: 'email' }
 6     ],
 7     proxy: {
 8         type: 'ajax',
 9         api: {
10             create: '../handlers/GetData.ashx'
11         },
12         actionMethods: {
13             create : 'GET',
14             read   : 'GET',
15             update : 'GET',
16             destroy: 'GET'
17         },
18         reader: {
19             type: 'json',
20             root: 'users'
21         },
22         writer: {
23             type: 'json',
24             encode: true,
25             root: 'users'
26         }
27     }
28 });
复制代码

配置为第二种方式的代码

复制代码
 1 Ext.define('Demo.model.User', {
 2     extend: 'Ext.data.Model',
 3     fields: [
 4         { name: 'name' },
 5         { name: 'email' }
 6     ],
 7     proxy: {
 8         type: 'ajax',
 9         api: {
10             create: '../handlers/GetData.ashx'
11         },
12         reader: {
13             type: 'json',
14             root: 'users'
15         },
16         writer: {
17             type: 'json',
18             encode: true,
19             root: 'users'
20         }
21     }
22 });
复制代码

配置为第三种方式的代码

复制代码
 1 Ext.define('Demo.model.User', {
 2     extend: 'Ext.data.Model',
 3     fields: [
 4         { name: 'name' },
 5         { name: 'email' }
 6     ],
 7     proxy: {
 8         type: 'ajax',
 9         api: {
10             create: '../handlers/GetData.ashx'
11         },
12         reader: {
13             type: 'json',
14             root: 'users'
15         }
16     }
17 });
复制代码

备注

这里没有总结着三种方式的使用场景,请大家给我个建议吧。我大概的想法是这样的。

  • 获取数据:如果参数少用第一种,否则就用第二种。多少看浏览器的限制。
  • 发送数据:如果数据少就用第二种,否则就用第三种。多少看浏览器的限制。

 

目录
相关文章
|
XML JSON 前端开发
Javascript-Ajax数据请求
Javascript-Ajax数据请求
102 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
159 0
|
前端开发
Ajax实战用户管理系统-完成数据初始化
Ajax实战用户管理系统-完成数据初始化
62 0
|
7月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
82 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
JSON 前端开发 JavaScript
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
69 0
ajax+json模拟一个页面多个统计图数据交互
ajax+json模拟一个页面多个统计图数据交互
47 1
|
JSON 前端开发 JavaScript
ajax和axios请求本地json数据对比
ajax和axios请求本地json数据对比
77 1
|
7月前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
|
7月前
|
XML JSON 前端开发
ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?
ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?
54 0
|
JSON 前端开发 数据格式
ajax请求解析json数据渲染在前端界面
ajax请求解析json数据渲染在前端界面
59 0