Extjs用ajax提交表单四种方式

/**

* <p>

* 第一种Ajax提交方式

* </p>

* <p>

* 这种方式需要直接使用ext Ajax方法进行提交

* </p>

* <p>

* 使用这种方式，需要将待传递的参数进行封装

* </p>

*

* @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() {

}

});

}

/**

* <p>

* 第二种Ajax提交方式

* </p>

* <p>

* 这种方式将为ext的ajax指定一个html表单

* </p>

* <p>

* 使用这种方式，不需要将待传递的参数进行封装

* </p>

*

* @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() {

}

});

}

/**

* <p>

* 第三种Ajax提交方式

* </p>

* <p>

* 这种方式将为ext的自己的表单进行提交

* </p>

* <p>

* 使用这种方式，需要使用ext自己的textField组件

* </p>

*

* @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();

}

/**

* <p>

* 第四种Ajax提交方式

* </p>

* <p>

* 这种方式将html的表单转化为ext的表单进行异步提交

* </p>

* <p>

* 使用这种方式，需要定义好html的表单

* </p>

*

* @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);

}

});

}