38

次のコードを使用して、JSON 配列データを jquery ajax で解析したいと思います。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    var result;
    function jsonparser1() {
        $.ajax({
            type: "GET",
            url: "http://10.211.2.219:8080/SampleWebService/sample.do",
            dataType: "jsonp",
            success: function (xml) {
                alert(xml.data[0].city);
                result = xml.code;
                document.myform.result1.value = result;
            },
        });
    }        
</script>    
</head>
<body>
<p id="details"></p>
<form name="myform">
    <input type="button" name="clickme" value="Click here to show the first name" onclick=jsonparser1() />
    <input type="text" name="result1" readonly="true"/>        
</form>
</body>
</html>

私のJSONデータは次のとおりです。

{"Data":   [{"Address":"chetpet","FirstName":"arulmani","Id":1,"LastName":"sathish","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"ramaraj","Id":3,"LastName":"rajesh","City":"chennai"},{"Address":"ramapuram","FirstName":"yendran","Id":3,"LastName":"sathi","City":"chennai"}],"Code":true}

しかし、出力が得られません...誰か助けてください...

4

7 に答える 7

90

コンセプトの説明

クロスドメインAJAX呼び出しを実行しようとしていますか？つまり、サービスは同じWebアプリケーションパスでホストされていませんか？JSONPを実行するには、Webサービスがメソッドインジェクションをサポートしている必要があります。

コードは問題ないようで、WebサービスとWebアプリケーションが同じドメインでホストされている場合は機能するはずです。

jQueryが実際にクエリURLに新しいパラメータを追加していること$.ajaxを意味するaを実行する場合。dataType: 'jsonp'

たとえば、URLがの場合http://10.211.2.219:8080/SampleWebService/sample.do、jQueryはを追加し?callback={some_random_dynamically_generated_method}ます。

このメソッドは、実際にwindowオブジェクトにアタッチされたプロキシのようなものです。これは具体的なことではありませんが、次のようになります。

window.some_random_dynamically_generated_method = function(actualJsonpData) {
    //here actually has reference to the success function mentioned with $.ajax
    //so it just calls the success method like this: 
    successCallback(actualJsonData);
}

概要

クライアントコードは問題ないようです。ただし、サーバーコードを変更して、クエリ文字列で渡された関数名でJSONデータをラップする必要があります。すなわち

クエリ文字列でリクエストした場合

?callback=my_callback_method

次に、サーバーは次のようにラップされたデータに応答する必要があります。

my_callback_method({your json serialized data});
于 2012-07-31T09:13:49.480 に答える
8

ajax-cross-origin プラグインを使用する必要があります: http://www.ajax-cross-origin.com/

オプション crossOrigin: true を追加するだけです

$.ajax({
    crossOrigin: true,
    url: url,
    success: function(data) {
        console.log(data);
    }
});
于 2014-08-03T21:01:21.650 に答える
1

試す

alert(xml.Data[0].City)

敏感にケース！

于 2012-07-31T09:00:00.323 に答える
1

JSON データにはプロパティDataが含まれていますが、アクセスしていますdata。大文字と小文字が区別されます

function jsonparser1() {
    $.ajax({
        type: "GET",
        url: "http://10.211.2.219:8080/SampleWebService/sample.do",
        dataType: "json",
        success: function (xml) {
            alert(xml.Data[0].City);
            result = xml.Code;
            document.myform.result1.value = result;
        },
    });
}

EDITまた、都市とコードの大文字と小文字が間違っています。(@クリストファー・ケニーに感謝)

EDIT2 また、 jsonpではなく json である必要があります (少なくともこの場合)

更新あなたの最新のコメントによると、この回答を読む必要があります: https://stackoverflow.com/a/11736771/325836 by Abdul Munim

于 2012-07-31T08:54:49.653 に答える
0

jquery json parseでxmlを解析する必要があります...つまり

  var parsed_json = $.parseJSON(xml);
于 2012-07-31T08:54:30.873 に答える
0

アラート (xml.data[0].city);

代わりに xml.data["Data"][0].city を使用してください

于 2012-07-31T08:54:34.953 に答える
0

Yahoo がホストするオープン パブリック プロキシ YQL を使用します。XML と HTML を処理します

https://gist.github.com/rickdog/d66a03d1e1e5959aa9b68869807791d5

于 2016-09-16T04:33:26.570 に答える