extJS中常用的4种Ajax异步提交方式


Posted in Javascript onMarch 07, 2014

/**

* 第一种Ajax提交方式 
* 这种方式需要直接使用ext Ajax方法进行提交 
* 使用这种方式,需要将待传递的参数进行封装 
* @return 
*/ 
function saveUser_ajaxSubmit1() { 
Ext.Ajax.request( { 
url : 'user_save.action', 
method : 'post', 
params : { 
userName : document.getElementById('userName').value, 
password : document.getElementById('password').value 
}, 
success : function(response, options) { 
var o = Ext.util.JSON.decode(response.responseText); 
alert(o.msg); 
}, 
failure : function() { 
} 
}); 
} 
/** 
* 第二种Ajax提交方式 
* 这种方式将为ext的ajax指定一个html表单 
* 使用这种方式,不需要将待传递的参数进行封装 
* 
* @return 
*/ 
function saveUser_ajaxSubmit2() { 
Ext.Ajax.request( { 
url : 'user_save.action', 
method : 'post', 
form : 'userForm', // 指定表单 
success : function(response, options) { 
var o = Ext.util.JSON.decode(response.responseText); 
alert(o.msg); 
}, 
failure : function() { 
} 
}); 
} 
/** 
* 第三种Ajax提交方式 
* 这种方式将为ext的自己的表单进行提交 
* 使用这种方式,需要使用ext自己的textField组件 
* 
* @return 
*/ 
function saveUser_ajaxSubmit3() { 
// 定义表单 
var formPanel = new Ext.FormPanel( { 
labelWidth : 75, 
frame : true, 
bodyStyle : 'padding:5px 5px 0', 
width : 350, 
defaults : { 
width : 230 
}, 
defaultType : 'textfield', 
items : [ { 
fieldLabel : '用户名', 
name : 'userName', 
allowBlank : false 
}, { 
fieldLabel : '密 码', 
name : 'password' 
} ] 
}); 
// 定义窗口 
var win = new Ext.Window( { 
title : '添加用户', 
layout : 'fit', 
width : 500, 
height : 300, 
closeAction : 'close', 
closable : false, 
plain : true, 
items : formPanel, 
buttons : [ { 
text : '确定', 
handler : function() { 
var form = formPanel.getForm(); 
var userName = form.findField('userName').getValue().trim(); 
var password = form.findField('password').getValue().trim(); 
if (!userName) { 
alert('用户名不能为空'); 
return; 
} 
if (!password) { 
alert('密码不能为空'); 
return; 
} 
form.submit( { 
waitTitle : '请稍后...', 
waitMsg : '正在保存用户信息,请稍后...', 
url : 'user_save.action', 
method : 'post', 
success : function(form, action) { 
alert(action.result.msg); 
}, 
failure : function(form, action) { 
alert(action.result.msg); 
} 
}); 
} 
}, { 
text : '取消', 
handler : function() { 
win.close(); 
} 
} ] 
}); 
win.show(); 
} 
/** 
* 第四种Ajax提交方式 
* 这种方式将html的表单转化为ext的表单进行异步提交 
* 使用这种方式,需要定义好html的表单 
* 
* @return 
*/ 
function saveUser_ajaxSubmit4() { 
new Ext.form.BasicForm('userForm').submit( { 
waitTitle : '请稍后...', 
waitMsg : '正在保存用户信息,请稍后...', 
url : 'user_save.action', 
method : 'post', 
success : function(form, action) { 
alert(action.result.msg); 
}, 
failure : function(form, action) { 
alert(action.result.msg); 
} 
}); 
}
Javascript 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
jquery JSON的解析方式
Jul 25 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
js实现不重复导入的方法
Mar 02 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
禁用JavaScript控制台调试的方法
Mar 07 #Javascript
jquery日历控件实现方法分享
Mar 07 #Javascript
jquery.form.js用法之清空form的方法
Mar 07 #Javascript
jquery设置按钮停顿3秒不可用
Mar 07 #Javascript
jquery 实现两级导航菜单附效果图
Mar 07 #Javascript
document.addEventListener使用介绍
Mar 07 #Javascript
开发中可能会用到的jQuery小技巧
Mar 07 #Javascript
You might like
PHP 危险函数解释 分析
2009/04/22 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python实现k-means算法
2018/02/23 Python
python机器学习之KNN分类算法
2018/08/29 Python
简单了解python中的与或非运算
2019/09/18 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
森林防火工作方案
2014/02/14 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
与美同行演讲稿
2014/09/13 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
天鹅湖观后感
2015/06/09 职场文书
python套接字socket通信
2022/04/01 Python