ExtJs 多个 Ajax 调用答案

【问题标题】：ExtJs Multiple Ajax callsExtJs 多个 Ajax 调用
【发布时间】：2014-09-22 04:23:15
【问题描述】：

我正在尝试学习 extjs 4.1 MVC。我有一个带有多个 ajax 调用的控制器。当代码在 Firefox 上运行时，我可以看到所有的 ajax 调用都进行了，但只有一个成功方法的警报即将出现。虽然数据可用于所有 4 个调用。任何 sugestions 我做错了什么？代码如下：

Ext.define('App.controller.StartupController', {
extend : 'Ext.app.Controller',

models : [ 'BasicModel' ],

stores : [ 'UserStore','RoleStore','RegionStore','ProductStore','FunctionStore' ],

views : [ 'FooterContainer', 'BodyContainer' ],

init : function() {
    this.loadStore();
    this.loadRole();
    this.loadRegion();
    this.loadFunction();
    this.loadProduct();
    this.control({

    });
},
loadRole: function(){
    // create an AJAX request for role
    var roleStore = this.getRoleStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadRole',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            roleStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 1: "+ jsonResp.userName);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadRegion: function(){
    // create an AJAX request for region
    var regionStore = this.getRegionStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadRegion',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            regionStore.loadData(jsonResp);

            Ext.Msg.alert("Info", "UserName from Server 2: "+ jsonResp.userName);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadFunction: function(){
    // create an AJAX request for function
    var functionStore = this.getFunctionStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadFunction',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            functionStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 3: "+ jsonResp.userName);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadProduct: function(){
    // create an AJAX request for product
    var productStore = this.getProductStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadProduct',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            productStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 4: "+ response.responseText);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadStore : function() {
}

});

【问题讨论】：

标签： javascript ajax extjs extjs4.1

【解决方案1】：

我猜想发生的事情是 ext 只有一个 MessageBox 组件实例，并且它被调用了四次......但你只能看到最后一个。如果你只是想要某种形式的反馈，我会使用 console.log 而不是 Ext.Msg.alert。

【讨论】：

你是对的。我在测试时仔细观察。 MessageBox 在那里重新设置，并且消息发生了变化。由于我的消息相似，只是数量发生了变化，因此似乎只有一个消息出现了。将代码更改为“console.log”，因为它只是用于调试。

【解决方案2】：

就这样吧，把下一个ajax请求放在成功响应上

    Ext.define('App.controller.StartupController', {
extend : 'Ext.app.Controller',

models : [ 'BasicModel' ],

stores : [ 'UserStore','RoleStore','RegionStore','ProductStore','FunctionStore' ],

views : [ 'FooterContainer', 'BodyContainer' ],

init : function() {
    this.loadStore();
    this.loadRole();
    this.control({

    });
},
loadRole: function(){
    // create an AJAX request for role
    var roleStore = this.getRoleStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadRole',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            roleStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 1: "+ jsonResp.userName);
            this.loadRegion();
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadRegion: function(){
    // create an AJAX request for region
    var regionStore = this.getRegionStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadRegion',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            regionStore.loadData(jsonResp);

            Ext.Msg.alert("Info", "UserName from Server 2: "+ jsonResp.userName);
            this.loadFunction();
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadFunction: function(){
    // create an AJAX request for function
    var functionStore = this.getFunctionStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadFunction',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            functionStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 3: "+ jsonResp.userName);
            this.loadProduct();
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadProduct: function(){
    // create an AJAX request for product
    var productStore = this.getProductStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadProduct',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            productStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 4: "+ response.responseText);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadStore : function() {
}

【讨论】：

这不起作用，问题是一样的。正如下面“Gordon Bockus”所建议的，MessageBox 的实例是相同的。此外，我将使用这种方法释放“异步”调用。