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

点评：本文主要介绍了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); 

} 

}); 

}