javascript - tutorial - json to html jquery
Stellen Sie eine domainübergreifende Ajax-JSONP-Anfrage mit jQuery (5)
Ich möchte JSON-Array-Daten mit Jquery Ajax mit dem folgenden Code analysieren:
<!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>
Meine JSON-Daten sind:
{"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}
Aber ich bekomme keine Ausgabe ... irgendjemand bitte helfen Sie ...
Konzept erklärt
Versuchen Sie einen domainübergreifenden AJAX-Aufruf durchzuführen? Das bedeutet, dass Ihr Dienst nicht in Ihrem Webanwendungspfad gehostet wird? Ihr Web-Service muss die Methodeninjektion unterstützen, um JSONP ausführen zu können.
Ihr Code scheint in Ordnung zu sein und sollte funktionieren, wenn Ihre Webdienste und Ihre Webanwendung in derselben Domäne gehostet werden.
Wenn Sie eine $.ajax
mit $.ajax
dataType: 'jsonp'
bedeutet, dass jQuery der URL der Abfrage tatsächlich einen neuen Parameter hinzufügt.
Wenn Ihre URL beispielsweise http://10.211.2.219:8080/SampleWebService/sample.do
lautet, fügt jQuery ?callback={some_random_dynamically_generated_method}
.
Diese Methode ist eher eine Art Proxy, der tatsächlich in einem window
angebracht ist. Das ist nichts Spezifisches, sieht aber ungefähr so aus:
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);
}
Zusammenfassung
Ihr Client-Code scheint gut zu sein. Sie müssen jedoch Ihren Servercode so ändern, dass Ihre JSON-Daten mit einem Funktionsnamen umschlossen werden, der mit der Abfragezeichenfolge übergeben wurde. dh
Wenn Sie mit der Abfragezeichenfolge abgefragt haben
?callback=my_callback_method
dann muss der Server Antwortdaten wie folgt verpacken:
my_callback_method({your json serialized data});
Ihre JSON-Daten enthalten die Eigenschaft Data
, aber Sie greifen auf data
. Es ist Groß- und Kleinschreibung
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 Auch City und Code sind im falschen Fall. (Danke @ Christopher Kenney)
EDIT2 Es sollte auch json sein, und nicht jsonp (zumindest in diesem Fall)
UPDATE Laut Ihrem letzten Kommentar sollten Sie diese Antwort lesen: https://.com/a/11736771/325836 von Abdul Munim
Sie müssen das Ajax-Cross-Origin-Plugin verwenden: http://www.ajax-cross-origin.com/
Fügen Sie einfach die Option crossOrigin hinzu: true
$.ajax({
crossOrigin: true,
url: url,
success: function(data) {
console.log(data);
}
});
Versuchen
alert(xml.Data[0].City)
Fall empfindlich!
alert (xml.data [0] .city);
Benutze stattdessen xml.data ["Data"] [0] .city