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