ExtJS中四种常用Ajax异步提交方式详解教程与实战

在ExtJS开发过程中，异步提交表单是每名开发者都会遇到的常见需求。本文总结了四种最实用的Ajax提交方法，每种都对应着不同的应用场景。从代码实现来看，后两种更贴近ExtJS的原生风格，但前两种在特定环境下依然能发挥重要作用。下面逐一进行详细分析。

方式一：手动封装参数，直接发起请求

第一种方式最为直观：通过Ext.Ajax.request，利用params属性手动将表单元素的值拼接成JSON对象发送。优势在于灵活度高，你可以在请求发出前对参数进行任意预处理；缺点也显而易见——每个字段都需要手动取值，当表单字段较多时，这种方式的维护成本会显著增加。

function sa veUser_ajaxSubmit1() {
    Ext.Ajax.request({
        url : 'user_sa ve.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() {
        }
    });
}

这段代码逻辑非常清晰：从页面DOM元素中获取输入值，封装成JSON，再发起异步请求。返回结果通过Ext.util.JSON.decode解析为对象，最后通过弹窗显示信息。简单直接，但不够“Ext化”，因为依旧依赖原始的DOM操作。

方式二：直接绑定表单，省时省力

第二种方式则要人性化得多——无需手动拼接参数，只需在Ext.Ajax.request中传入一个form属性，指定表单的HTML id，框架便会自动收集该表单中的所有字段并提交。

function sa veUser_ajaxSubmit2() {
    Ext.Ajax.request({
        url : 'user_sa ve.action',
        method : 'post',
        form : 'userForm', // 指定表单
        success : function(response, options) {
            var o = Ext.util.JSON.decode(response.responseText);
            alert(o.msg);
        },
        failure : function() {
        }
    });
}

从代码量对比，这段明显比第一种精简。核心在于form : 'userForm'这一行，直接关联了页面中已有的HTML表单。对于对ExtJS组件化要求不高的项目，这种方案无疑是最省心的选择。

方式三：全Ext组件化，真正落地的表单处理

到了第三种方式，才充分体现出ExtJS框架的完整能力。从表单构建开始，便使用Ext的FormPanel和TextField组件，再配合Ext.Window弹出窗口。尽管这种方式代码量最大，但它在实际项目中应用最广——因为整套UI风格统一，交互体验也更为流畅。

function sa veUser_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_sa ve.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();
}

这段代码中有几个值得关注的细节：非空校验在TextField定义时通过allowBlank : false配置，提交前又进行了一次手动校验。在实际开发中，虽然Ext内置的校验机制可以自动完成，但许多项目仍然会显式执行这一步骤，以确保数据完整性。

提交时使用的是form.submit而非Ext.Ajax.request——两者的关键区别在于：form.submit会自动携带表单中所有字段的值，同时返回值处理也经过了封装，通过action.result.msg就能直接获取服务端返回的信息，省去了手动JSON解析的步骤。

方式四：将HTML表单“升级”为Ext表单

第四种方式利用Ext.form.BasicForm对现有的HTML表单进行包装，然后直接提交。这相当于为原生表单套上一层Ext的外壳，优势在于无需重构页面上的表单结构，只需通过new Ext.form.BasicForm('userForm')引用表单ID即可。

function sa veUser_ajaxSubmit4() {
    new Ext.form.BasicForm('userForm').submit({
        waitTitle : '请稍后...',
        waitMsg : '正在保存用户信息,请稍后...',
        url : 'user_sa ve.action',
        method : 'post',
        success : function(form, action) {
            alert(action.result.msg);
        },
        failure : function(form, action) {
            alert(action.result.msg);
        }
    });
}

从代码层面看，这种写法最为精简——不需要手动拼接参数，不需要定义表单组件，甚至连FormPanel都不再需要。只要页面中存在一个ID为userForm的HTML表单，一行核心代码即可完成异步提交。非常适合页面结构已经固定、又不希望大范围改动的旧项目改造场景。

以上四种方式在实际开发中各有其适用场景。日常项目中，方式三使用频率最高；方式四适合对现有表单进行异步封装；而方式一和方式二更适用于对UI一致性要求不高、追求快速实现的场景。掌握了这几种方案，基本上就能应对ExtJS表单提交中的绝大多数需求。