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 相关文章推荐
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
禁用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+mysql写的留言本
2006/10/09 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
js类型检查实现代码
2010/10/29 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python制作小说爬虫实录
2017/08/14 Python
Python中装饰器学习总结
2018/02/10 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
学习型党组织建设经验材料
2014/05/26 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技