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 第三章章节总结的例子
Mar 23 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
JS快速实现简单计算器
Apr 08 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
python远程连接MySQL数据库
2019/04/19 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Python pymsql模块的使用
2020/09/07 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
幼儿教师工作感言
2014/02/14 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
应届毕业生自荐书
2014/06/18 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
大学副班长竞选稿
2015/11/21 职场文书
2019入党申请书格式
2019/06/25 职场文书