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); } }); }