extJS中常用的4种Ajax异步提交方式

2014-03-07 41

/**

* 第一种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下弹出窗口的变通
Apr 18 48
jquery 插件 任意位置浮动固定层
Dec 25 33
Vue.js系列之项目搭建(1)
Jan 03 45
JS正则替换去空格的方法
Mar 24 42
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 56
vue引用外部JS的两种种方法
Jan 28 53
Vue export import 导入导出的多种方式与区别介绍
Feb 12 51
手机访问当前页面