Realizar una solicitud JSONP ajax entre dominios con jQuery
Me gustaría analizar los datos de la matriz JSON con jquery ajax con el siguiente código:
<!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>
Mis datos JSON son:
{"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}
Pero no obtengo ningún resultado... alguien por favor ayude...
Concepto explicado
¿Estás intentando hacer una llamada AJAX entre dominios? Es decir, ¿su servicio no está alojado en la misma ruta de su aplicación web? Su servicio web debe admitir la inyección de métodos para poder ejecutar JSONP.
Su código parece estar bien y debería funcionar si sus servicios web y su aplicación web están alojados en el mismo dominio.
Cuando haces un $.ajaxwith, dataType: 'jsonp'significa que jQuery en realidad está agregando un nuevo parámetro a la URL de consulta.
Por ejemplo, si su URL es http://10.211.2.219:8080/SampleWebService/sample.doentonces jQuery agregará ?callback={some_random_dynamically_generated_method}.
Este método es más bien un proxy adjunto a windowun objeto. Esto no es nada específico pero se parece a esto:
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);
}
Resumen
Su código de cliente parece estar bien. Sin embargo, debe modificar el código de su servidor para envolver sus datos JSON con un nombre de función que pasó con una cadena de consulta. es decir
Si ha solicitado una cadena de consulta
?callback=my_callback_method
entonces, su servidor debe responder con datos empaquetados así:
my_callback_method({your json serialized data});
Debe utilizar el complemento ajax-cross-origin: http://www.ajax-cross-origin.com/
Simplemente agregue la opción crossOrigin: true
$.ajax({
crossOrigin: true,
url: url,
success: function(data) {
console.log(data);
}
});
Sus datos JSON contienen la propiedad Data, pero está accediendo data. Es sensible a mayúsculas y minúsculas
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;
},
});
}
EDITAR También la ciudad y el código están en mayúsculas y minúsculas incorrectas. (Gracias @Christopher Kenney)
EDIT2 También debería ser json y no jsonp (al menos en este caso)
ACTUALIZACIÓN Según su último comentario, debería leer esta respuesta: https://stackoverflow.com/a/11736771/325836 de Abdul Munim
Intentar
alert(xml.Data[0].City)
¡Con sensibilidad entre mayúsculas y minúsculas!
