使用jQuery创build跨域ajax JSONP请求

我想parsingJSON数组与jquery ajax与下面的代码:

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

我的JSON数据是:

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

但我没有得到任何输出…任何人请帮助…

概念解释

你在尝试做一个跨域的AJAX调用吗? 意思是说,你的服务不在你的同一个Web应用程序path中? 您的networking服务必须支持方法注入才能执行JSONP。

您的代码看起来很好,如果您的Web服务和您的Web应用程序托pipe在同一个域中,它应该可以正常工作。

当你用dataType: 'jsonp'做一个$.ajax dataType: 'jsonp'意味着jQuery实际上是向查询URL添加一个新的参数。

例如,如果您的URL是http://10.211.2.219:8080/SampleWebService/sample.do那么jQuery将添加?callback={some_random_dynamically_generated_method}

这种方法实际上是附加在window对象中的一种代理。 这是没有具体的,但看起来像这样:

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

概要

你的客户端代码看起来很好。 但是,您必须修改您的服务器代码,以使用与查询string一起传递的函数名称来包装您的JSON数据。 即

如果你有查询stringreqested

 ?callback=my_callback_method 

那么,你的服务器必须响应这样包装的数据:

 my_callback_method({your json serialized data}); 

您需要使用ajax-cross-origin插件: http : //www.ajax-cross-origin.com/

只需添加选项crossOrigin:true

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

尝试警报(xml.Data [0] .City)大小写敏感!

您的JSON数据包含属性Data ,但您正在访问data 。 这是区分大小写的

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

编辑也城市和代码是在错误的情况下。 (谢谢@克里斯托弗·肯尼)

编辑2它也应该是JSON,而不是JSONP(至less在这种情况下)

更新根据您最新的评论,你应该阅读这个答案: https ://stackoverflow.com/a/11736771/325836通过Abdul Munim

你需要parsing你的XML与jQuery jsonparsing…即

  var parsed_json = $.parseJSON(xml); 

警报(xml.data [0]。市);

使用xml.data [“Data”] [0] .city来代替

使用由Yahoo托pipe的公开的公共代理YQL。 处理XML和HTML

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