這篇文章主要介紹了extJS中常用的4種Ajax異步提交方式,需要的朋友可以參考下
/** 代碼如下: * 第一種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); } }); }