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 相关文章推荐
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
php获取操作系统语言代码
2013/11/04 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python实现简单http服务器
2018/04/12 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python实现随机漫步方法和原理
2019/06/10 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
财务出纳岗位职责
2014/02/03 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP