web-dev-qa-db-ja.com

jsonpコンテンツタイプのjQuery.ajaxリクエスト後のparsererror

JQueryバージョン1.5.1を使用して、次のajax呼び出しを実行しています。

$.ajax({
    dataType: 'jsonp',
    data: { api_key : apiKey },
    url: "http://de.dawanda.com/api/v1/" + resource + ".json",
    success: function(data) { console.log(data); },
    error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); console.log(textStatus); }
});

サーバーは有効なjsonオブジェクトで応答します：

{
  "response": {
    "type":"category",
    "entries":1,
    "params":{
      "format":"json",
      "api_key":"c9f11509529b219766a3d301d9c988ae9f6f67fb",
      "id":"406",
      "callback":"jQuery15109935275333671539_1300495251986",
      "_":"1300495252693"
    },
    "pages":1,
    "result":{
      "category":{
        "product_count":0,
        "id":406,
        "restful_path":"/categories/406",
        "parent_id":null,
        "name":"Oberteile"
       }
     }
   }
 }

ただし、成功コールバックは呼び出されず、代わりにエラーコールバックが次の出力を生成します。

jQuery15109935275333671539_1300495251986 was not called
parsererror

なぜこれが起こるのですか？

JQueryに追加のライブラリを使用していません。

編集：

「jsonp」の代わりに「json」をdataTypeとして使用してajax呼び出しを行おうとすると、サーバーは空の文字列で応答します。

jqueryjsonpjquery-1.5parse-error
57
Thomas

JSONPは、別のドメインからデータをロードするメカニズムとしてスクリプトタグをドキュメントに挿入することで機能するため、応答を何らかのコールバック関数でラップする必要があります。

基本的に、次のようにスクリプトタグがドキュメントに動的に挿入されます。

<script src="http://the.other.server.com/foo?callback=someFn"></script>

callbackは呼び出しているリソースに依存しますが、パラメーターがcallbackであるのは一般的です。

someFnはサーバーから返されたデータの処理に使用されるため、サーバーは次のように応答する必要があります。

someFn({theData: 'here'});

SomeFnはリクエストの一部として渡されるため、サーバーはそれを読み取り、データを適切にラップする必要があります。

これはすべて、別のドメインからコンテンツを取得していることを前提としています。その場合、同じOriginポリシーによって制限されます： http://en.wikipedia.org/wiki/Same_Origin_policy

58
Evan Trimboli

Jquery 1.5にアップグレードし、ドメイン間で呼び出しを試みた後、同じ問題が発生しました。最終的に、$。getJSONが機能することがわかりました。具体的には、

$.getJSON(url,
    function(data){
        yourFunction(data);
       return false;
    });

私が使用したURLは次のようなものでした。

var url = WEB_SERVER_URL;
url = url + "&a=" + lat;
url = url + "&b=" + lng; ....
url = url + "&jsoncallback=?";

別のサーバーで実行されているサーバーで、私はこのコードの制御を追加しました：

PrintWriter writer = response.getWriter();
String jsonString = json.toString(JSON_SPACING);
String callback = request.getParameter("jsoncallback");
// if callback in URL and is not just the "?" (e.g. from localhost)
if (callback != null && callback.length() > 1)
{
    writer.write(callback + "(" + jsonString + ");");
}
else
{
    writer.write(jsonString);
}

（jsonオブジェクトはJSONObjectのインスタンスです。コードはここにあります http://www.json.org/Java/ ）

9
Bryan

jsonpをデータ型として使用している場合（クロスドメインリクエストを行う）Jqueryがランダム関数を生成し、コールド（callback =？）という名前のクエリ文字列として要求されたURLに追加する場合、以下のようにこの関数のパラメーターとして応答jsonデータを追加する必要があります-

url : http://www.dotnetbull.com/cross-domain-call.ashx?ref=jquery-jsonp-request
url call by ajax :
http://www.dotnetbull.com/cross-domain-call.ashx?ref=jquery-jsonp-request&callback=jQuery1510993527567155793_137593181353

応答データは次のようになります。

 string callback = context.Request.QueryString["callback"];

 if (!string.IsNullOrEmpty(callback))
   context.Response.Write(string.Format("{0}({1});", callback, jc.Serialize(outputData)));
else
   context.Response.Write(jc.Serialize(outputData));

続きを読む：jsonpコンテンツタイプのjquery.ajaxリクエスト後のパーサーエラー

enter image description here

6
Rohit

1つの小さな間違いがあります:) .jsonではなく.jsをリクエストする必要があります。

$.ajax({
    dataType: 'jsonp',
    data: { api_key : apiKey },
    url: "http://de.dawanda.com/api/v1/" + resource + ".js",
    success: function(data) { console.log(data); },
    error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); console.log(textStatus); }
});

ああ、あなたはAPIのクライアントがいることに気付きましたか？ https://github.com/dawanda/dawanda-api-client-js

3
sdepold

呼び出しているサービスに、JsonP形式でデータを返す機能があることを確認してください。

Asp.net webapiを使用している場合、WebApiContrib.Formatting.Jsonpを使用できます。これはオープンソースです。

WebApiConfig.Registerに次のような行があることを確認します。

config.Formatters.Insert（0、new JsonpMediaTypeFormatter（new JsonMediaTypeFormatter（）、 "callback"））;

これで髪を引っ張っていました。これが誰かを助けることを願っています。

1
William

ここではjsonpを指定しないでください。 JSON文字列を受け取るだけなので、jsonを使用します。 json（json with padding）は、javascript関数の実行を想定しています。その場合、クエリ文字列内に「callback =」を指定する必要があります。それがjQueryがこれを処理できない理由であると思います。コールバックという名前のプロパティがあります。

1
jAndy

$ .parseJSONを使用して、オブジェクトへの応答を読み取ってみてください。

success: function(data) {
    var json = $.parseJSON(data);
}
1
Adam

すべてのサーバーがjsonpをサポートしているわけではありません。サーバーは、結果にコールバック関数を設定する必要があります。私はこれを使用して、純粋なjsonを返すがjsonpをサポートしないサイトからjson応答を取得します（ただし、将来的にはそうなる可能性があります）。

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData()
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}
0
mAsT3RpEE

パラメータ「callback =？」を追加しない限り、同じ問題が発生していました。または「c =？」 URLで。

いいね： " http://de.dawanda.com/api/v1/ " +リソース+ ".json＆c =？"

問題を解決できます。それは私のために働いた。

0
Parveen Verma