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 类型判断代码分析
Mar 28 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python实现一个简单的验证码程序
2017/11/03 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
应届生会计求职信
2013/11/11 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
2014企业年终工作总结
2014/12/23 职场文书
2015年学校政教工作总结
2015/07/20 职场文书