wake-up-neo.net

Erstellen Sie domänenübergreifende Ajax-JSONP-Anforderungen mit jQuery

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 keinen Output ... bitte helfen Sie mit ...

javascriptjqueryajaxjson
36
prabu R

Konzept erklärt

Versuchen Sie, einen domänenübergreifenden AJAX -Aufruf auszuführen? Das heißt, Ihr Dienst wird nicht in demselben Webanwendungspfad gehostet. Ihr Web-Service muss die Methodeninjektion unterstützen, um JSONP ausführen zu können.

Ihr Code scheint gut zu sein und sollte funktionieren, wenn Ihre Webdienste und Ihre Webanwendung in derselben Domäne gehostet werden.

Wenn Sie einen $.ajax mit dataType: 'jsonp' ausführen, bedeutet dies, dass jQuery der Abfrage-URL tatsächlich einen neuen Parameter hinzufügt.

Wenn Ihre URL beispielsweise http://10.211.2.219:8080/SampleWebService/sample.do ist, fügt jQuery ?callback={some_random_dynamically_generated_method} hinzu.

Diese Methode ist eher eine Art Proxy, der tatsächlich in einem window-Objekt angehängt ist. Das ist nichts konkretes, sieht aber 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 den Servercode ändern, um Ihre JSON-Daten mit einem Funktionsnamen zu umschließen, der mit der Abfragezeichenfolge übergeben wurde. d.h.

Wenn Sie mit der Abfragezeichenfolge angefragt haben

?callback=my_callback_method

dann muss Ihr Server die Antwortdaten wie folgt beantworten:

my_callback_method({your json serialized data});
85
Abdul Munim

Sie müssen das ajax-cross-Origin-Plugin verwenden: http://www.ajax-cross-Origin.com/

Fügen Sie einfach die Option crossOrigin: true hinzu

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

Ihre JSON-Daten enthalten die Eigenschaft Data, Sie greifen jedoch auf data zu. Es ist case sensitive

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 Stadt und Code liegen im falschen Fall. (Danke @Christopher Kenney)

EDIT2 Es sollte auch json und nicht jsonp sein (zumindest in diesem Fall)

UPDATE Laut Ihrem letzten Kommentar sollten Sie diese Antwort lesen: https://stackoverflow.com/a/11736771/325836 von Abdul Munim

1
Yngve B-Nilsen

Versuchen 

alert(xml.Data[0].City)

Groß- und Kleinschreibung!

1
pirklajos

sie müssen Ihre XML mit JQuery Json Parse analysieren ... d. h

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

alert (xml.data [0] .city);

verwenden Sie stattdessen xml.data ["Data"] [0] .city

0
Stepan Suvorov

verwenden Sie Open Public Proxy YQL, gehostet von Yahoo. Verarbeitet XML und HTML

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

0
rickdog