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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
layui动态表头的实现代码
Aug 22 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
Javascript之文件操作
2007/03/07 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Python编程求质数实例代码
2018/01/31 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
使用python实现学生信息管理系统
2021/02/25 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
关爱老人标语
2014/06/21 职场文书
公证委托书
2014/08/01 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis