extJS中常用的4種Ajax異步提交方式
更新時間:2014年03月07日 17:22:57 作者:
這篇文章主要介紹了extJS中常用的4種Ajax異步提交方式,需要的朋友可以參考下
/**
* 第一種Ajax提交方式
* 這種方式需要直接使用ext Ajax方法進行提交
* 使用這種方式,需要將待傳遞的參數(shù)進行封裝
* @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表單
* 使用這種方式,不需要將待傳遞的參數(shù)進行封裝
*
* @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的表單轉(zhuǎn)化為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);
}
});
}
復(fù)制代碼 代碼如下:
* 第一種Ajax提交方式
* 這種方式需要直接使用ext Ajax方法進行提交
* 使用這種方式,需要將待傳遞的參數(shù)進行封裝
* @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表單
* 使用這種方式,不需要將待傳遞的參數(shù)進行封裝
*
* @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的表單轉(zhuǎn)化為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);
}
});
}
您可能感興趣的文章:
- Extjs grid添加一個圖片狀態(tài)或者按鈕的方法
- ExtJS[Desktop]實現(xiàn)圖標換行示例代碼
- 解決Extjs上傳圖片無法預(yù)覽的解決方法
- ExtJs之帶圖片的下拉列表框插件
- ExtJS 4.2 Grid組件單元格合并的方法
- ExtJS4的文本框(textField)使用正則表達式進行驗證(Regex)的方法
- ExtJS4給Combobox設(shè)置列表中的默認值示例
- ExtJS4如何自動生成控制grid的列顯示、隱藏的checkbox
- ExtJS4 表格的嵌套 rowExpander應(yīng)用
- extjs4 treepanel動態(tài)改變行高度示例
- ExtJS4中的requires使用方法示例介紹
- extjs4圖表繪制之折線圖實現(xiàn)方法分析
相關(guān)文章
導(dǎo)入extjs、jquery 文件時$使用沖突問題解決方法
在html頁面中,沒有導(dǎo)入jquery文件時,可以正常保存,而導(dǎo)入jquery文件后,則不能不存了,發(fā)現(xiàn)導(dǎo)入的jquery文件和現(xiàn)有的extjs文件沖突了2014-01-01
ext combox 下拉框不出現(xiàn)自動提示,自動選中的解決方法
ext combox 如果想實現(xiàn)類似于 baidu 搜索時的提示功能。必須禁止其分頁功能才可以。2010-02-02
ExtJS4給Combobox設(shè)置列表中的默認值示例
這篇文章主要介紹了ExtJS4如何給Combobox設(shè)置列表中的默認值,需要的朋友可以參考下2014-05-05
Extjs中通過Tree加載右側(cè)TabPanel具體實現(xiàn)
用Extjs4.1來做界面,有關(guān)Extjs4.1資料在網(wǎng)上也相對來說較少,下面是具體的實現(xiàn)代碼1.左側(cè)的功能樹2.需要打開的對應(yīng)的view,有類似需求的朋友可以參考下哈2013-05-05

