extJS中常用的4种Ajax异步提交方式

前端技术 2023/09/09 JavaScript
/**
复制代码 代码如下:

* 第一种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);
}
});
}

本文地址:https://www.stayed.cn/item/23416

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。