4

ajaxとjqueryでstackoverflowapiを使用しようとすると、動作させることができません。データ型として使用する必要があることはわかって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);
};

何を試しても、firebugで常にこの応答が返されます。

"parsererror" "onJsonp was not called"

Twitter APIを使おうとしたときに同じ問題が発生したため、私は本当に馬鹿げたことをしていることを知っていますが、それを機能させるために何をしたかを一生思い出せません。

アップデート

それで、私はloog @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

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 に答える
1

onJsonp はクロージャー内で定義されていますか? もしそうなら、コールバックを参照ではなく名前 ('onJsonp') で参照していることが問題なのでしょうか?

2 つの解決策: onJsonp をグローバル スコープで定義するか、引用符を削除して参照渡しします。

于 2011-07-22T23:48:38.363 に答える
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 に答える