web-dev-qa-db-ja.com

jQueryクロスドメインAjax

私のajaxコードは

$.ajax({
    type: 'GET',
    dataType: "jsonp",
    processData: false,
    crossDomain: true,
    jsonp: false,
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        console.log("in");
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

これはクロスドメインのajaxリクエストです。

私はリクエストに対して正しい応答を取得していますが、firebugで確認すると、その応答を確認できます。

これは、Firebugの応答で、Webブラウザーを介してこのURLにアクセスしているときの応答です

{"AuthenticateUserResult":"{\"PKPersonId\":1234,\"Salutation\":null,\"FirstName\":\"Miqdad\",\"LastName\":\"Kumar\",\"Designation\":null,\"Profile\":\"\",\"PhotoPath\":\"\/UploadFiles\/\"}"}

しかし、私はエラーが発生しています

SyntaxError: invalid label

{"AuthenticateUserResult":"{\"PKPersonId\":8970,\"Salutation\

動作させるために他の方法を使用する必要があるかどうか。 phonegap + jqueryモバイルアプリでこれを実装したいと思います。

また、Webサービスにアクセスできません

chrome Webセキュリティを無効にすると、問題なく動作します

jqueryajaxjsonjquery-mobilecordova
14
Miqdad Ali

内部のJSON構造体が文字列として渡されるように見えます。そのデータをオブジェクトとして取得するには、もう一度JSON.parse（）する必要があります。

try {
  responseData = JSON.parse(responseData);
}
catch (e) {}

編集：次を試してください：

$.ajax({
    type: 'GET',
    dataType: "json",
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        console.log("in");
        var data = JSON.parse(responseData['AuthenticateUserResult']);
        console.log(data);
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});
7
EWit

残念ながら、このWebサービスは別のJSONを含むJSONを返しているようです-内部JSONのコンテンツの解析は成功しています。解決策はいですが、私にとってはうまくいきます。 JSON.parse(...)は、文字列全体を変換しようとして失敗します。常に{"AuthenticateUserResult":で始まる答えが得られ、興味深いデータがこの後にあると仮定して、試してください：

$.ajax({
    type: 'GET',
    dataType: "text",
    crossDomain: true,
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        var authResult = JSON.parse(
            responseData.replace(
                '{"AuthenticateUserResult":"', ''
            ).replace('}"}', '}')
        );
        console.log("in");
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

dataTypeがtextでなければならないことが非常に重要です。これは、Webサービスから受け取っている不正なJSONの自動解析を防ぐためです。

基本的に、先頭と末尾の引用符とともに最上位の中括弧とキーAuthenticateUserResultを削除することにより、外側のJSONを消去します。結果は、構文解析の準備が整った整形式のJSONです。

6
ElmoVanKielmo

サーバーからの応答はJSON文字列形式です。 dataTypeが 'json'に設定されている場合、jqueryはそれを直接使用しようとします。 dataTypeを「テキスト」として設定し、それを手動で解析する必要があります。

$.ajax({
    type: 'GET',
    dataType: "text", // You need to use dataType text else it will try to parse it.
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        console.log("in");
        var data = JSON.parse(responseData['AuthenticateUserResult']);
        console.log(data);
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});
4
Subir Kumar Sao

JSONPを使用する予定の場合は、そのために作成されたgetJSONを使用できます。 jQueryにはJSONPのヘルパーメソッドがあります。

$.getJSON( 'http://someotherdomain.com/service.svc&callback=?', function( result ) {
       console.log(result);
});

以下のリンクを読む

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

JSONPで.ajax（）を使用する基本的な例

クロスドメインjsonpの基本的な使い方

3
Techie

「jsonp」を使用する場合、基本的には関数呼び出しでラップされたデータを返します。

jsonpCallback([{"id":1,"value":"testing"},{"id":2,"value":"test again"}])
where the function/callback name is 'jsonpCallback'.

サーバーにアクセスできる場合は、最初に応答が正しい"jsonp" フォーマット

サーバーからのこのような応答については、ajax呼び出しでも何かを指定する必要があります。

jsonpCallback: "jsonpCallback",  in your ajax call

コールバックの名前は「jsonpCallback」である必要はなく、例として選択した名前だけでなく、サーバー側で行われた名前（ラッピング）と一致する必要があることに注意してください。

あなたの問題に対する私の最初の推測は、サーバーからの応答が本来あるべきものではないということです。

0
PJR

ここに私のコードからの抜粋があります。それがあなたの問題を解決するなら..

クライアントコード：

JsonpCallBackを設定： 'photos'およびdataType： 'jsonp'

 $('document').ready(function() {
            var pm_url = 'http://localhost:8080/diztal/rest/login/test_cor?sessionKey=4324234';
            $.ajax({
                crossDomain: true,
                url: pm_url,
                type: 'GET',
                dataType: 'jsonp',
                jsonpCallback: 'photos'
            });
        });
        function photos (data) {
            alert(data);
            $("#Twitter_followers").html(data.responseCode);
        };

サーバー側コード（Rest Easyを使用）

@Path("/test_cor")
@GET
@Produces(MediaType.TEXT_PLAIN)
public String testCOR(@QueryParam("sessionKey") String sessionKey, @Context HttpServletRequest httpRequest) {
    ResponseJSON<LoginResponse> resp = new ResponseJSON<LoginResponse>();
    resp.setResponseCode(sessionKey);
    resp.setResponseText("Wrong Passcode");
    resp.setResponseTypeClass("Login");
    Gson gson = new Gson();
    return "photos("+gson.toJson(resp)+")"; // CHECK_THIS_LINE
}
0
Sanjay Kumar

次のように JSON.parse を使用して文字列を解析する必要があります。

var json_result = {"AuthenticateUserResult":"{\"PKPersonId\":1234,\"Salutation\":null,\"FirstName\":\"Miqdad\",\"LastName\":\"Kumar\",\"Designation\":null,\"Profile\":\"\",\"PhotoPath\":\"\/UploadFiles\/\"}"};

var parsed = JSON.parse(json_result.AuthenticateUserResult);
console.log(parsed);

ここには、次のようなものがあります。

Designation
null

FirstName
"Miqdad"

LastName
"Kumar"

PKPersonId
1234

PhotoPath
"/UploadFiles/"

Profile
""

Salutation
null

リクエストについては、dataType:'jsonp'を設定し、サイトのルートディレクトリにcrossdomain.xmlというファイルを追加することを忘れないでください：

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.Adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<!-- Read this: www.Adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->

<!-- Most restrictive policy: -->
<site-control permitted-cross-domain-policies="none"/>

<!-- Least restrictive policy: -->
<!--
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" to-ports="*" secure="false"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
-->
</cross-domain-policy>

編集 Sanjay Kumar POST

そのため、jsonpCallback！を使用してJSONPでコールバック関数を呼び出すように設定できます。

$.Ajax({
    jsonpCallback : 'your_function_name',
    //OR with anonymous function
    jsonpCallback : function(data) {
        //do stuff
    },
    ...
});
0
JoDev