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