4

在尝试将stackoverflow api与ajax和jquery一起使用时，我无法让它工作。我知道我必须使用jsonp作为数据类型，并且我一直在阅读不同的方式来执行 jsonp 请求，但我仍然无法让它工作。

这是我的ajax请求：

var API_KEY = "XXXXXXXXXXXX";
var URL = "http://api.stackoverflow.com/1.1/";

var _url = URL + 'users?filter=locrizak';

$.ajax({
    dataType:'jsonp',
    jsonp : false,
    jsonpCallback : "onJsonp",
    url: _url,
    success: function(val) {
            console.log('success');
        //console.log(val);
    },
    error: function(val) {
        console.log('error');
        console.log(arguments);

    }
});

function onJsonp() {
    console.log(arguments);
};

无论我尝试什么，我总是在萤火虫中得到这个响应：

"parsererror" "onJsonp was not called"

我知道我在做一些非常愚蠢的事情，因为我在尝试使用 Twitter api 时遇到了同样的问题，但我一生都记不起我做了什么来让它工作。

更新

因此，我查看了 @genesis 的工作演示，并尝试了几次不同的方式，但没有运气。然后我注意到我的 jQuery 版本并将其切换到他正在使用的版本，它神奇地工作。

我将最新版本更改 http://code.jquery.com/jquery-1.6.2.min.js 为 http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

嗯，不知道它为什么会起作用，可能是一个错误，但谁知道可能还有其他变化。

如果有人知道如果你能解释一下为什么会很棒。我也意识到 jQuery 会自动添加回调，但我无法让它像那样工作。我该怎么做才能让这个工作，我想你会说一个“更合适”的方式？

var URL = "http://api.stackoverflow.com/1.1/";
api.get(URL + 'users?filter=locrizak');
api.get = function(url) {
    $.ajax({
        /*dataType:'jsonp',*/
        dataType:'json',
        jsonp : false,
        url: url + '&jsonp=api.onJsonp',
        success: function(val) {
            console.log('success');
            //console.log(val);
        },
        error: function(val) {
            //error gets called but.......
            console.log(arguments);
            console.log('error');
            console.log(val);
        }
    });

};
api.onJsonp = function() {
    //so does the callback!!  
    console.log('called');
    console.log(arguments);
}
//note this code is simplified
4

4 回答 4

2

你必须打电话

http://api.stackoverflow.com/1.1/users?filter=locrizak&jsonp=jsonp

工作演示和代码：

<script>
var URL = "http://api.stackoverflow.com/1.1/";
var api;
api = {
    get: function(url) {
        $.ajax({

            dataType: 'json',
            jsonp: false,
            jsonpCallback: 'api.onJsonp',
            url: url + '&jsonp=api.onJsonp',
        });
    },
    onJsonp: function(val) {
        $("body").prepend(val.users[0].reputation);
        console.log('called');

    }
}

api.get(URL + 'users?filter=locrizak');

//note this code is simplified</script>
于 2011-07-22T23:31:17.437 回答
1

onJsonp 是否在闭包中定义？如果是这样，也许您通过名称（'onJsonp'）而不是通过引用来引用回调的事实是问题所在？

两种解决方案：要么在全局范围内定义 onJsonp，要么通过删除引号通过引用传递它。

于 2011-07-22T23:48:38.363 回答
1

您可以添加jsonp:'jsonp',到ajax()通话中。stackoverflow API 文档声明它需要jsonp查询参数和 jQuery 属性来配置传递的查询字符串参数jsonp。没有它，默认是添加callback=?到 URL 的末尾。

我进入success控制台，运行：

var URL = "http://api.stackoverflow.com/1.1/";
var _url = URL + 'users?filter=locrizak';

$.ajax({
    dataType: 'jsonp',
    jsonp: 'jsonp', // <--- add this
    url: _url,
    success: function(val) {
       console.log('success');
    },
    error: function(val) {
        console.log('error');
        console.log(arguments);
    }
});

此外，不应jsonp:false,设置为; 必须是，否则不添加查询字符串参数。falsetrue

更新：让它与 jQuery v1.6.2 一起正常工作，并使用我上面原始答案中描述的正确参数。回调函数必须在 jQuery 匿名函数之外。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>JSONP Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $.ajax({
                dataType:'jsonp',
                jsonp: 'jsonp',
                jsonpCallback: 'onJsonp',
                url: 'http://api.stackoverflow.com/1.1/users?filter=locrizak',
                success: function(data) {
                    console.log('success', data);
                },
                error: function(data) {
                    console.log('error', data);
                }
            });
        });

        function onJsonp(data) {
            console.log('callback', data);
        };
    </script>
</head><body></body></html>

更新 2：根据评论，这是另一个版本，这次包装在一个对象中。请注意，您不能使用jsonpCallback: 'api.onJsonp',，因为它仅在 jQuery 匿名函数中定义。保持封装的最简单方法是创建一个全局函数并将控制权传回给api对应方。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>JSONP Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            api = {
                get: function(url) {
                    var URL = "http://api.stackoverflow.com/1.1/";
                    $.ajax({
                        dataType: 'jsonp',
                        jsonp: 'jsonp',
                        jsonpCallback: 'onJsonp',
                        url: URL + url,
                        success: function(data) {
                            console.log('success', data);
                        },
                        error: function(data) {
                            console.log('error', data);
                        }
                    });
                },
                onJsonp: function(data) {
                    console.log('callback', data);
                }
            }

            api.get('users?filter=locrizak');
        });

        function onJsonp(data) {
            api.onJsonp(data);
        }
    </script>
</head><body></body></html>
于 2011-07-22T23:56:53.787 回答
0 
$.ajax({
    dataType:'jsonp',
    jsonp : true,
    jsonpCallback : "onJsonp",
    url: _url,
    success: function(val) {
            console.log('success');
        //console.log(val);
    },
    error: function(val) {
        console.log('error');
        console.log(arguments);

    }
});

将 jsonp 设置为 true。

于 2011-07-22T23:39:15.173 回答