extJs常用的四种Ajax异步提交

/**
 * <p>
 * 第一种Ajax提交方式
 * </p>
 * <p>
 * 这种方式需要直接使用ext Ajax方法进行提交
 * </p>
 * <p>
 * 使用这种方式，需要将待传递的参数进行封装
 * </p>
 * 
 * @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() {
		}
	});
}
/**
 * <p>
 * 第二种Ajax提交方式
 * </p>
 * <p>
 * 这种方式将为ext的ajax指定一个html表单
 * </p>
 * <p>
 * 使用这种方式，不需要将待传递的参数进行封装
 * </p>
 * 
 * @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() {
		}
	});
}
/**
 * <p>
 * 第三种Ajax提交方式
 * </p>
 * <p>
 * 这种方式将为ext的自己的表单进行提交
 * </p>
 * <p>
 * 使用这种方式，需要使用ext自己的textField组件
 * </p>
 * 
 * @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();
}
/**
 * <p>
 * 第四种Ajax提交方式
 * </p>
 * <p>
 * 这种方式将html的表单转化为ext的表单进行异步提交
 * </p>
 * <p>
 * 使用这种方式，需要定义好html的表单
 * </p>
 * 
 * @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);
		}
	});
}