38

我想使用以下代码使用 jquery ajax 解析 JSON 数组数据：

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

但我没有得到任何输出......任何人请帮忙......

4

7 回答 7

90

概念解释

您是否正在尝试进行跨域 AJAX 调用？意思是，您的服务不是托管在同一个 Web 应用程序路径中吗？您的 Web 服务必须支持方法注入才能执行 JSONP。

您的代码看起来不错，如果您的 Web 服务和您的 Web 应用程序托管在同一个域中，它应该可以工作。

当您执行$.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);
}

概括

您的客户端代码似乎很好。但是，您必须修改服务器代码以使用与查询字符串一起传递的函数名称来包装 JSON 数据。IE

如果您已请求查询字符串

?callback=my_callback_method

然后，您的服务器必须响应这样包装的数据：

my_callback_method({your json serialized data});
于 2012-07-31T09:13:49.480 回答
8

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

只需添加选项 crossOrigin: true

$.ajax({
    crossOrigin: true,
    url: url,
    success: function(data) {
        console.log(data);
    }
});
于 2014-08-03T21:01:21.650 回答
1

您的 JSON-data 包含属性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;
        },
    });
}

编辑也城市和代码是错误的情况。（感谢@Christopher Kenney）

EDIT2它也应该是 json，而不是 jsonp（至少在这种情况下）

更新根据您的最新评论，您应该阅读以下答案：https : //stackoverflow.com/a/11736771/325836 by Abdul Muim

于 2012-07-31T08:54:49.653 回答
1

尝试

alert(xml.Data[0].City)

区分大小写！

于 2012-07-31T09:00:00.323 回答
0

你需要用 jquery json parse 解析你的 xml ......即

  var parsed_json = $.parseJSON(xml);
于 2012-07-31T08:54:30.873 回答
0

警报（xml.data[0].city）；

改用 xml.data["Data"][0].city

于 2012-07-31T08:54:34.953 回答
0

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

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

于 2016-09-16T04:33:26.570 回答