web-dev-qa-db-ja.com

Jqueryjsonp応答エラー-コールバックが呼び出されませんでした

別のドメインからいくつかの情報を取得しようとしています。ドメインはjsonp呼び出しのみを許可し、他のドメインは拒否されます。実行する代わりにコンテンツを取得するにはどうすればよいですか？応答でエラーが発生するためです。実行する必要はありません。スクリプトで必要なだけです。任意の形式（応答はjsonですが、jsはそれを理解しません）。私はそのドメインに影響を与えることができないので、その側で何かを変更することは不可能です。これが私のコードです：

$.ajax({
    url: url + '?callback=?',
    crossDomain: true,
    type: "POST",
    data: {key: key},
    contentType: "application/json; charset=utf-8;",
    async: false,
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'jsonpCallback',
    error: function(xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

window.jsonpCallback = function(response) {
    console.log('callback success');
};
javascriptjsonjqueryjsonp
7
user3203283

$.ajax呼び出しにはいくつかの問題があります。

$.ajax({
    url: url + '?callback=?',
    // this is not needed for JSONP.  What this does, is force a local
    // AJAX call to accessed as if it were cross domain
    crossDomain: true,
    // JSONP can only be GET
    type: "POST",
    data: {key: key},
    // contentType is for the request body, it is incorrect here
    contentType: "application/json; charset=utf-8;",
    // This does not work with JSONP, nor should you be using it anyway.
    // It will lock up the browser
    async: false,
    dataType: 'jsonp',
    // This changes the parameter that jQuery will add to the URL
    jsonp: 'callback',
    // This overrides the callback value that jQuery will add to the URL
    // useful to help with caching
    // or if the URL has a hard-coded callback (you need to set jsonp: false)
    jsonpCallback: 'jsonpCallback',
    error: function(xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

次のようにURLを呼び出す必要があります。

$.ajax({
    url: url,
    data: {key: key},
    dataType: 'jsonp',
    success: function(response) {
        console.log('callback success');
    },
    error: function(xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

JSONPはnotJSONです。 JSONPは、実際には<head>にスクリプトタグを追加しているだけです。応答は、JSONデータをパラメーターとして持つ関数呼び出しを含むJavaScriptファイルである必要があります。

JSONPは、サーバーがサポートする必要があるものです。サーバーが正しく応答しない場合、JSONPを使用することはできません。

ドキュメントをお読みください： http://api.jquery.com/jquery.ajax/

14
Rocket Hazmat
var url = "https://status.github.com/api/status.json?callback=apiStatus";
$.ajax({
    url: url,
    dataType: 'jsonp',
    jsonpCallback: 'apiStatus',
    success: function (response) {
        console.log('callback success: ', response);
    },
    error: function (xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

このコードを試してください。

また、これ url をブラウザで直接呼び出して、正確に何が返されるかを確認してください。こうすることで、実際に何が起こるかをよりよく理解できます:)。

2
Naushad KM

jsonpCallbackパラメーターは、コード内の関数の名前ではなく、JSONP応答内の関数の名前を指定するために使用されます。これはおそらく削除できます。 jQueryはあなたに代わってこれを自動的に処理します。

代わりに、（応答データを取得するための）successパラメーターを探しています。例えば：

$.ajax({
    url: url,
    crossDomain: true,
    type: "POST",
    data: {key: key},
    contentType: "application/json; charset=utf-8;",
    async: false,
    dataType: 'jsonp',
    success: function(data){
        console.log('callback success');
        console.log(data);
    }
    error: function(xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

JQueryのデフォルトに設定されていた他のJSONP関連のパラメーターを削除することもできます。見る - jQuery.ajax 詳細については。

1
Jacob Budin