如何从 EXTJS 中的控制器功能进行 ajax 调用

Posted 2023-02-26

【中文标题】如何从 EXTJS 中的控制器功能进行 ajax 调用

【英文标题】：How to make an ajax call from a function of controller in EXTJS

【发布时间】：2013-05-07 13:54:00

【问题描述】：

我的应用程序中有一个控制器，我必须通过 Ajax 调用访问 Servlet。从控制器的函数调用 Ajax 的正确语法是什么。这是我的代码 ....

Ext.define('Gamma.controller.ControlFile', 

extend : 'Ext.app.Controller',

//define the stores
stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],
//define the models 
models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],
//define the views
views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'],  



initializedEvents: false,
init: function() 
    this.control(
        '#barColumnChart': 
            afterlayout: this.afterChartLayout
        
    );
,
afterChartLayout: function()
    var me=this;
    if(this.initializedEvents==true) return;
    this.initializedEvents=true;
    Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown',function(obj)

       // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);

      var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count'];

      me.dataBaseCall(barData);
    );
,
   dataBaseCall: function(barData)
  // i have to call ajax request here 
   // my Servlet name is TopCount  

【参考方案1】：

这可能非常接近您想要的：

Ext.define('Gamma.controller.ControlFile', 

    extend : 'Ext.app.Controller',

    //define the stores
    stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],
    //define the models 
    models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],
    //define the views
    views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'],  



    initializedEvents: false,
    init: function() 
        this.control(
            '#barColumnChart': 
                afterlayout: this.afterChartLayout
            
        );
    ,
    afterChartLayout: function()
        var me=this;
        if(this.initializedEvents==true) return;
        this.initializedEvents=true;
        Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown',function(obj)

            // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);

            var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count'];

            me.dataBaseCall(obj.storeItem.data['source'], obj.storeItem.data['count']);
        );
    ,
    dataBaseCall: function(source, count)
        // i have to call ajax request here 
        // my Servlet name is TopCount
        Ext.Ajax.request(
            url: "TopCount",
            success: function(response, opts)
                //do what you want with the response here
            ,
            failure: function(response, opts) 
                alert("server-side failure with status code " + response.status);
            ,
            params: 
                source: source,
                count:  count
            
        );
    
);

【讨论】：

感谢您的回复 Reimius.. 但它说“未捕获的参考错误：未定义源”.. 我该怎么办?????????

【参考方案2】：

试试这个

dataBaseCall: function (barData,urlx)
var params = JSON.stringify(barData);
    var xhReq = new XMLHttpRequest();
    xhReq.open("POST", urlx, false);

    xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhReq.send(params);
    var json_object = JSON.parse(xhReq.responseText);
    if (!json_object) 
        console.log('Server Returned Null');
    else
         console.log(json_object);
    

其中 urlx 是 webservice url，barData 是要传递给服务器的数据。该 url 必须与应用程序 url Same_origin_policy 的域相同

【讨论】：

在使用 Extjs 框架时，使用这种方式很笨重……而且不是异步的。