web-dev-qa-db-ja.com

jQueryを使用してクロスドメインajax JSONPリクエストを作成する

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

<!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}

しかし、私は出力を得ていません...誰も助けてください...

javascriptjqueryajaxjson
37
prabu R

コンセプト説明

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

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

$.ajaxをdataType: 'jsonp'で実行すると、jQueryは実際にクエリURLに新しいパラメーターを追加します。

たとえば、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});
89
Abdul Munim

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

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

$.ajax({
    crossOrigin: true,
    url: url,
    success: function(data) {
        console.log(data);
    }
});
8
Ninioe

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 [〜＃〜]また、市とコードの大文字小文字が間違っています。 （@Christopher Kenneyに感謝）

EDIT2jsonpではなくjsonであるべきです（少なくともこの場合）

[〜＃〜] update [〜＃〜]最新のコメントによると、この答えを読む必要があります。 https：// stackoverflow .com/a/11736771/325836 by Abdul Munim

1
Yngve B-Nilsen

試して

alert(xml.Data[0].City)

大文字と小文字を区別してください！

1
pirklajos

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

  var parsed_json = $.parseJSON(xml);
0
Erdem E.

alert（xml.data [0] .city）;

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

0
Stepan Suvorov

yahooがホストする公開パブリックプロキシYQLを使用します。 XMLとHTMLを処理します

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

0
rickdog