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