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 1.7.2中getAll方法的疑惑分析
May 23 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
JS数据类型分类及常用判断方法
Nov 19 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
win7安装php框架Yii的方法
2016/01/25 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
Python选课系统开发程序
2016/09/02 Python
Python模拟用户登录验证
2017/09/11 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
python绘制多个曲线的折线图
2020/03/23 Python
24式加速你的Python(小结)
2019/06/13 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
视图的作用
2014/12/19 面试题
高校教师思想汇报
2014/01/11 职场文书
开业庆典策划方案
2014/02/18 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
超市收银员岗位职责
2015/04/07 职场文书
男生贾里读书笔记
2015/06/30 职场文书
公司仓库管理制度
2015/08/04 职场文书
医院岗前培训心得体会
2016/01/08 职场文书