extJs常用的四种Ajax异步提交

最新推荐文章于 2021-08-05 13:08:51 发布

原创最新推荐文章于 2021-08-05 13:08:51 发布 · 1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #extjs #function #action #user #html

ExtJs 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了四种不同的Ajax提交方式，包括直接使用extAjax方法、指定html表单、使用ext表单组件和将html表单转化为ext表单进行异步提交，重点讲解了用户信息保存过程中的参数封装和验证。

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