web-dev-qa-db-fra.com

Effectuer une demande jaxp entre domaines avec jQuery

Je voudrais analyser les données d'un tableau JSON avec jquery ajax avec le code suivant:

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

Mes données JSON sont:

{"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}

Mais je ne reçois aucune sortie ... quiconque s'il vous plaît aider ...

javascriptjqueryajaxjson
36
prabu R

Concept expliqué

Essayez-vous de faire un appel interdomaine AJAX? Cela signifie-t-il que votre service n'est pas hébergé dans le même chemin d'accès à votre application Web? Votre service Web doit prendre en charge l’injection de méthode pour pouvoir utiliser JSONP.

Votre code semble correct et il devrait fonctionner si vos services Web et votre application Web sont hébergés dans le même domaine.

Lorsque vous faites un $.ajax avec dataType: 'jsonp', ce qui signifie que jQuery ajoute un nouveau paramètre à l'URL de la requête.

Par exemple, si votre URL est http://10.211.2.219:8080/SampleWebService/sample.do, jQuery ajoutera ?callback={some_random_dynamically_generated_method}.

Cette méthode est plutôt un type de proxy attaché dans un objet window. Ceci n’a rien de spécifique mais ressemble à quelque chose comme ceci:

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);
}

Résumé

Votre code client semble très bien. Cependant, vous devez modifier votre code serveur pour envelopper vos données JSON avec un nom de fonction transmis avec une chaîne de requête. c'est à dire.

Si vous avez demandé une chaîne de requête

?callback=my_callback_method

alors, votre serveur doit traiter les données de réponse comme suit:

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

Vous devez utiliser le plugin ajax-cross-Origin: http://www.ajax-cross-Origin.com/

Il suffit d'ajouter l'option crossOrigin: true

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

Vos données JSON contiennent la propriété Data, mais vous accédez à data. C'est sensible à la casse

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 La ville et le code sont également dans le mauvais cas. (Merci @ Christopher Kenney)

EDIT2 Il devrait également s'agir de json, et non de jsonp (du moins dans ce cas)

UPDATE Selon votre dernier commentaire, vous devriez lire cette réponse: https://stackoverflow.com/a/11736771/325836 de Abdul Munim

1
Yngve B-Nilsen

Essayer 

alert(xml.Data[0].City)

Sensible aux majuscules et minuscules!

1
pirklajos

vous devez analyser votre fichier XML avec jquery json parse ... i.e

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

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

utilisez plutôt xml.data ["Data"] [0] .city

0
Stepan Suvorov

utilisez un proxy public ouvert YQL, hébergé par Yahoo. Gère XML et HTML

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

0
rickdog