Question

我有这个功能：

function getImage(query){
    var serach_title = query.replace(/\ /g, '+');
    var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title;
    $.ajax({
        url: imgUrl,
        cache: false,
        dataType:'jsonp',
        success: function(data) {
            var image = data.responseData.results[0].unescapedUrl;
            console.log(image);
            return image;
        }
    });
}

当我将此功能设置为如此可见时：

var image = getImage(title);

var image与undefined一起回来。但是console.log(image);正在正确记录网址。

如何解决此问题？

Answer 1

您的函数getImage无效。它立即返回结果，但是ajax请求是异步的。因此，您应该使用回调函数，该函数将在执行请求时被调用。

function getImage(query, callback) {
    var serach_title = query.replace(/\ /g, '+');
    var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title;
    $.ajax(
        url: imgUrl,
        cache: false, 
        dataType:'jsonp', 
        success: function(data) {
            var img = data.responseData.results[0].unescapedUrl;
            if (callback) {
                callback(img);
            }
    });
}

// here you should show progress... 
var image; 
getImage(query, function(img) {
    image= img;
});

另一种方法是使用jQuery延迟对象从ajax请求中获取结果：

function getImage(query) {
   var serach_title = query.replace(/\ /g, '+');
   var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title;
   return $.get(imgUrl, null, 'jsonp');
}

// here you should show progress... 
var image;
getImage(query).done(function(data) {
   image = data.responseData.results[0].unescapedUrl;
});

Answer 2

这里的ajax调用是异步的，所以你可以使用js回调来解决这个问题：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

// function
function getImage(query, callback){
    var serach_title = query.replace(/\ /g, '+');
    var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title;
    $.ajax({
        url: imgUrl,
        cache: false,
        dataType:'jsonp',
        success: function(data) {
            callback({
                image: data.responseData.results[0].unescapedUrl
            });
        }
    });
}

// usage
getImage('apple', function(e)
{
    // after request is made to google and you have a result
    console.log(e.image);
})

</script>

我的控制台输出：

enter image description here

Answer 3

让你回到ajax函数：

function getImage(query){
    var serach_title = query.replace(/\ /g, '+');
    var imgUrl = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+serach_title;
    $.ajax({
        url: imgUrl,
        cache: false, 
        dataType:'jsonp', 
        success: function(data) {
            return data.responseData.results[0].unescapedUrl;
        }
    });
}

Answer 4

您正在异步获取图像。这可以通过将ajax调用设置为同步来完成。

$.ajax({
    url: imgUrl,
    async: false,
    cache: false,
    dataType:'jsonp',
    success: function(data) {
        var image = data.responseData.results[0].unescapedUrl;
        console.log(image);
        return image;
    }
});

将函数设置为变量时出错

4 个答案: