Question

我正在做一些地理位置/地图工作并构建一个JQuery小部件，这样代码就可以很好地移植到未来的项目中。

尽管我发出了AJAX请求，但我还是碰壁了。这是我的小部件中的几个方法：

    getGeocodeForAddress: function(address) {    
    req = this._googleMapsApiRequest('geocode','json','address='+address);

    //We need 'req' to be the response from the API request so we can do work with it.

},


/**
* Private Maps API request method. This will help to construct a call to Google Maps API.
* 
* @param service
* @param output
* @param params
*/
_googleMapsApiRequest: function(service,output,params) {

    var widget = this;
    var protocol = (this.options.useHttps) ? 'https://' : 'http://';

    if (this.options.googleMapsApiKey != '') {
        params += '&key' + this.options.googleMapsApiKey;
    }        

    var uri = protocol + 'maps.googleapis.com/maps/api/' + service + '/' + output + '?' + params;
    this._sendToLog("Google Maps API Request: " + uri);

    $.ajax({
        async: false,
        type: "GET",
        cache: false,
        url: encodeURI(uri),
        success: function(response) {                
            //We need the contents of response to be available to the method that called this one.
        },
        error: function() {
            widget._sendToLog('AJAX error');
        },             
    });


},

具体问题是，一旦发出ajax请求并返回成功，我就无法将数据恢复到调用它的方法中。

我已经尝试使用_googleMapsApiRequest中的widget.options.ajaxResponse设置内部选项，但这似乎只是＆＃39; null＆＃39;在调用方法中，我尝试从AJAX方法中返回响应，但这也不起作用。

我确定我需要在_googleMapsApiRequest方法中进行回调，以便它等待该方法完成，然后我可以根据它执行代码，但是如何在窗口小部件中执行此操作？

Answer 1

休息一下，想一想其他事情，然后再进行更多的研究，我想出了一个回调解决方案....它看起来有点笨拙，但它似乎也可以做到这一点，任何人都可以改进吗？ / p>

    getGeocodeForAddress: function(address) {    

    this._googleMapsApiRequest('geocode','json','address='+address, function(response)
    {           
      //I can access response within this callback.
    });

},


/**
* Private Maps API request method. This will help to construct a call to Google Maps API.
* 
* @param service
* @param output
* @param params
*/
_googleMapsApiRequest: function(service, output, params, callback) {

    var widget = this;
    var protocol = (this.options.useHttps) ? 'https://' : 'http://';

    if (this.options.googleMapsApiKey != '') {
        params += '&key' + this.options.googleMapsApiKey;
    }        

    var uri = protocol + 'maps.googleapis.com/maps/api/' + service + '/' + output + '?' + params;
    this._sendToLog("Google Maps API Request: " + uri);

    $.ajax({
        async: false,
        type: "GET",
        cache: false,
        url: encodeURI(uri),
        success: function(response) {                
            widget._sendToLog('AJAX success, response follows');
            widget._sendToLog(response);
        },
        error: function() {
            widget._sendToLog('AJAX error');
        }             
    }).done(function(response) {
        if (typeof callback == "function") {
            callback(response);
        }
    });
},

我还没有测试过它是如何处理不成功的ajax请求的，但它至少在请求有效时才能解决问题。

带有AJAX请求的JQuery UI Widgets

1 个答案: