使用 jQuery 解析 JSON 响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17364091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parse JSON response using jQuery
提问by Radhakrishna Rayidi
I'm dealing with a JSON Response in one of my applications. I have established a connection using jsonp successfully. But I'm not able to parse my response.
我在我的一个应用程序中处理 JSON 响应。我已经成功地使用 jsonp 建立了连接。但我无法解析我的回复。
Code:
代码：
<script type='text/javascript'>
(function($) {
var url = 'http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json';
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'callback',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
console.log(json.topics);
$("#nav").html('<a href="">'+json.topics+"</a>");
},
error: function(e) {
console.log(e.message);
}
});
})(jQuery);
</script>
Output i'm getting:
我得到的输出：
[object Object],[object Object],[object Object]
Response Example:
响应示例：
callback({"topics":[{"name":"topic","content":[{"link_text":"link","link_src":"http://www.foodnetwork.com/"},{"link_text":"link","link_src":"http://www.hgtv.com/"},{"link_text":"link","link_src":"http://www.diynetwork.com/"},{"link_text":"link","link_src":"http://www.cookingchanel.com/"},{"link_text":"link","link_src":"http://www.travelchannel.com/"},{"link_text":"link","link_src":"http://www.food.com/"}]},{"name":"topic2","content":[{"link_text":"link","link_src":"http://www.google.com/"},{"link_text":"link","link_src":"http://www.yahoo.com/"},{"link_text":"link","link_src":"http://www.aol.com/"},{"link_text":"link","link_src":"http://www.msn.com/"},{"link_text":"link","link_src":"http://www.facebook.com/"},{"link_text":"link","link_src":"http://www.twitter.com/"}]},{"name":"topic3","content":[{"link_text":"link","link_src":"http://www.a.com/"},{"link_text":"link","link_src":"http://www.b.com/"},{"link_text":"link","link_src":"http://www.c.com/"},{"link_text":"link","link_src":"http://www.d.com/"},{"link_text":"link","link_src":"http://www.e.com/"},{"link_text":"link","link_src":"http://www.f.com/"}]}]});
I want in the form of :
我想要的形式是：
Topic: Link
主题：链接
回答by Aguardientico
Give this a try:
试试这个：
success: function(json) {
console.log(JSON.stringify(json.topics));
$.each(json.topics, function(idx, topic){
$("#nav").html('<a href="' + topic.link_src + '">' + topic.link_text + "</a>");
});
},
回答by Justin Imran
I was hanging out on Google, then I found your question and it's very simple to parse JSON response into normal HTML. Just use this little JavaScript code:
我在 Google 上闲逛，然后我发现了您的问题，将 JSON 响应解析为普通 HTML 非常简单。只需使用这个小小的 JavaScript 代码：
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
</body>
</html>
回答by mobuhai
jQuery.ajax({
type: 'GET',
url: "../struktur2/load.php",
async: false,
contentType: "application/json",
dataType: 'json',
success: function(json) {
items = json;
},
error: function(e) {
console.log("jQuery error message = "+e.message);
}
});
回答by Paul-59701
Original question was to parse a list of topics, however starting with the original example to have a function return a single value may also useful. To that end, here is an example of (one way) to do that:
最初的问题是解析主题列表，但是从原始示例开始，让函数返回单个值也可能有用。为此，这里有一个（一种方式）这样做的例子：
<script type='text/javascript'>
function getSingleValueUsingJQuery() {
var value = "";
var url = "rest/endpointName/" + document.getElementById('someJSPFieldName').value;
jQuery.ajax({
type: 'GET',
url: url,
async: false,
contentType: "application/json",
dataType: 'json',
success: function(json) {
console.log(json.value); // needs to match the payload (i.e. json must have {value: "foo"}
value = json.value;
},
error: function(e) {
console.log("jQuery error message = "+e.message);
}
});
return value;
}
</script>
回答by muthukumar
Try bellow code. This is help your code.
试试下面的代码。这是帮助您的代码。
$("#btnUpdate").on("click", function () {
//alert("Alert Test");
var url = 'http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json';
$.ajax({
type: "GET",
url: url,
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
debugger;
$.each(result.callback, function (index, value) {
alert(index + ': ' + value.Name);
});
},
failure: function (result) { alert('Fail'); }
});
});
I could not access your url. Bellow error is shows
我无法访问您的网址。波纹管错误显示
XMLHttpRequest cannot load http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:19829' is therefore not allowed access. The response had HTTP status code 501.
XMLHttpRequest 无法加载http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' http://localhost:19829'。响应具有 HTTP 状态代码 501。
回答by muthukumar
The data returned by the JSON is in json format : which is simply an arrays of values. Thats why you are seeing [object Object],[object Object],[object Object].
JSON 返回的数据采用 json 格式：它只是一个值数组。这就是为什么您会看到[object Object],[object Object],[object Object]。
You have to iterate through that values to get actuall value. Like the following
您必须遍历这些值才能获得实际值。像下面这样
jQuery provides $.each() for iterations, so you could also do this:
jQuery 为迭代提供了 $.each()，所以你也可以这样做：
$.getJSON("url_with_json_here", function(data){
$.each(data, function (linktext, link) {
console.log(linktext);
console.log(link);
});
});
Now just create an Hyperlink using that info.
现在只需使用该信息创建一个超链接。
