web-dev-qa-db-ja.com

URLに「？callback =」パラメータを追加せずにjQueryJSONPリクエストを作成できますか？

サーバーはリクエストURLのパラメータを受け入れないため、URLの余分なパラメータをすべて削除する必要があります。もちろん、サーバーを制御することはできません。

jQuery：

$.ajax({
    type: 'GET',
    url: 'http://cross-domain.com/the_jsonp_file,
    jsonpCallback: 'jsonCallback',
    contentType: 'application/json',
    cache: 'true',
    dataType: 'jsonp',
    success: function(json) {
        console.log(json);
    },
});

JSONPファイル：

jsonCallback({"test": "hello"});

そのAjaxリクエストを送信すると、URLは次のようになります。

http://cross-domain.com/the_jsonp_file?callback=jsonCallback

しかし、私はこれが必要です（パラメーターなし）：

http://cross-domain.com/the_jsonp_file

編集：

これが私の全体的な状況です：

function MyClass(imgs) {
    // imgs is array of URLs
    this.imgs = imgs;

    this.submit = function() {
        // button click event triggers this method
        this._show();
    };

    this._show = function() {
        var _this = this;

        for (var i = 0; i < _this.imgs.length; i++) {
            (function($, j) {
                $.ajax({
                    type: 'GET',
                    url: _this.imgs[j],
                    jsonp : false,
                    jsonpCallback: 'jsonCallback',
                    cache: 'true',
                    dataType:'jsonp',
                    success: function(json) {
                      console.log(_this.imgs[j]);
                    },
                });
            })(jQuery, i);
        };
    };
};

そして、私はこのエラーメッセージを受け取りました：

Uncaught TypeError: Property 'jsonCallback' of object [object Window] is not a function

奇妙なことに、jsonCallbackを正常に呼び出しているリクエストはほとんどありません。

javascriptjqueryajaxcross-domainjsonp
8
Jonypoins

JQueryのドキュメントを確認してください-ajax引数でjsonp：falseおよびjsonpCallback： 'callbackFunction'と言っています。

$.ajax({
    url: 'http://cross-domain.com/the_jsonp_file',
    jsonp : false,
    jsonpCallback: 'jsonCallback',
    // contentType: 'application/json', -- you can't set content type for a <script> tag, this option does nothing for jsonp | KevinB
    cache: 'true',
    dataType : 'jsonp'
});

http://api.jquery.com/jQuery.ajax/

10
Adam

すべてのリクエストが同じコールバックjsonCallbackを呼び出すので、それが問題だと思いました。

まず、ドキュメント内のJavascript：

<script type="text/javascript">
    new Gallery([
        ['http://cross-domain.url/whatever', '27b2afa5c77c2510'],
        ['http://cross-domain.url/whatever', '13df51b2f2801bc1'],
        ['http://cross-domain.url/whatever', '4de326fc9a2c5a24'],
        ['http://cross-domain.url/whatever', '60c266a73ba699bc'],
        ['http://cross-domain.url/whatever', '3db01e95aaf2b9f2'],
        ['http://cross-domain.url/whatever', '94eb17f9b0e1be9c'],
        ['http://cross-domain.url/whatever', 'ca8c5c3c0b8cd5ae'],
        ['http://cross-domain.url/whatever', '6b0f5c5737ee88fd'],
        ['http://cross-domain.url/whatever', '318d8ebb51a97a15'],
        ['http://cross-domain.url/whatever', 'f5028c8b62e81a8b'],
    ]);
</script>

クライアントは、次のようにJSONPファイル（別のJavascriptファイル）をサーバーにアップロードします。

jsonCallback_27b2afa5c77c2510({"test": "hello"});

jQueryのデフォルトのコールバックのように各リクエストを区切るためにjsonCallback_の後にランダムな16進文字列を追加しました。

入力からランダムな16進文字列を読み取り、jsonpCallbackとして設定します。

function Gallery(imgs) {
    // imgs is array of URLs
    this.imgs = imgs;

    this.submit = function() {
        // button click event triggers this method
        this._show();
    };

    this._show = function() {
        var _this = this;

        for (var i = 0; i < _this.imgs.length; i++) {
            (function($, j) {
                $.ajax({
                    type: 'GET',
                    url: _this.imgs[j][0],
                    jsonp : false,
                    jsonpCallback: 'jsonCallback_' + _this.imgs[j][1],
                    cache: 'true',
                    dataType:'jsonp',
                    success: function(json) {
                      // Process
                      console.log(json.test);
                    },
                });
            })(jQuery, i);
        };
    };
};

@Adam @Kevin B @Dcullenと皆さん、ありがとう！ ：D

p.s：上記のすべてのソースを入力したのは、たとえば、正しくない場合があります。

1
Jonypoins

JSONPでは、URLの一部としてコールバックが必要です。あなたがアクセスしているサーバーはJSONPをサポートしていないという説明に基づいて推測します。

jQueryはスクリプトタグをドキュメントに追加します。これを追加すると、APIリクエストが実行され、レスポンスがコード内のコールバック関数を呼び出します（これにより簡略化されます）。

より正確な説明が必要な場合は、ウィキペディアをご覧ください。 http://en.wikipedia.org/wiki/JSONP#How_it_works

0
Dcullen