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仿PS里的羽化效果代码
Dec 20 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
浅析JavaScript动画
Jun 10 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
创建与框架无关的JavaScript插件
Dec 01 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php在线代理转向代码
2012/05/05 PHP
php数组查找函数总结
2014/11/18 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
关于PHP开发的9条建议
2015/07/27 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
Unix如何添加新的用户
2014/08/20 面试题
《金钱的魔力》教学反思
2014/02/24 职场文书
艺术教育实施方案
2014/05/03 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
MySQL深分页问题解决思路
2022/12/24 MySQL