ExtJs 多个 Ajax 调用
Posted
技术标签:
【中文标题】ExtJs 多个 Ajax 调用【英文标题】：ExtJs Multiple Ajax calls 【发布时间】：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()
);
【问题讨论】：
【参考方案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 的实例是相同的。此外，我将使用这种方法释放“异步”调用。以上是关于ExtJs 多个 Ajax 调用的主要内容，如果未能解决你的问题，请参考以下文章