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中get和post的简单实例
Feb 04 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
禁用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
apache php模块整合操作指南
2012/11/16 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Django中的用户身份验证示例详解
2019/08/07 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
优秀党员转正的自我评价
2013/10/06 职场文书
高校学生干部的自我评价分享
2013/11/04 职场文书
养殖项目策划书范文
2014/01/13 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
高中班级口号
2014/06/09 职场文书
小班教师个人总结
2015/02/05 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
为什么node.js不适合大型项目
2021/04/28 Javascript