logo标签列表

使用JQuery和Javascript获取并解析JSON的最简单方法？

javascriptjqueryhtmljsonajax
3

我正在尝试让这段代码正常工作，但似乎无法弄清楚。目标是以最简单、最易于理解的方式返回和解析json对象。以下是代码片段。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
</head>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>


<script>
  $.getJSON('http://finance.google.com/finance/info?client=ig&q=NASDAQ:TSLA', function(data) {
   var obj = JSON.parse(data);
document.getElementById("demo").innerHTML = obj.id;
  });
</script>

</body>
</html>

更新：

在下面所有人的帮助下，我成功解决了问题，谢谢！我将把解决方案发布出来以供今后参考。问题出在我忘记了回调函数，因为我没有遵循同源策略。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
 $.getJSON('https://www.google.com/finance/info?q=NASDAQ:TSLA&callback=?', function(data) {
     $('#demo').text(data[0].id);
    });
});
</script>
</head>
<body>

<p id="demo"></p>

</body>
</html>

不需要在 $.getJSON 中使用 JSON.parse。返回给回调函数的数据已经被解析为数组/对象。 - charlietfl
2个回答
3

obj对象是一个数组，因此您需要使用索引来访问元素。

document.getElementById("demo").innerHTML = obj[0].id;

此外，你不需要使用JSON.parse方法，因为传递给回调函数的data已经是一个json对象。
你建议的更改并没有解决这个问题。我做错了什么吗？还需要做些什么改变吗？ - jrseriel
你不需要使用json.parse方法，因为data已经是一个json。 - Mihai Alexandru-Ionut
所以我放弃了json.parse方法，只是将数据分配给obj，但这里仍然没有运气。<script> $.getJSON('http://finance.google.com/finance/info?client=ig&q=NASDAQ:TSLA&#39;, function(data) { var obj = data; document.getElementById("demo").innerHTML = obj[0].id; }); </script> - jrseriel
1
关于 JSON 的陈述是不准确的...JSON 根据定义是字符串，返回给回调函数的数据是对象。 - charlietfl
1

你在问题中的代码很可能是解析请求中期望的JSON数据的最短方式.. 这个快捷方式来自于：

var http = $.ajax({
    url: 'http://finance.google.com/finance/info?client=ig&q=NASDAQ:TSLA',
    dataType: "json"        //This is what makes jQuery parse the data in the expected format
});

http.done(function(data){
    // data is already parsed as JSON
    $("#demo").text(data.id);
});
编辑： 我刚刚检查了你的请求响应，并发现它是一个有注释的JSON数组，因此这将导致解析失败。
为了实际解析被注释的JSON响应，内容必须去除使其成为注释的初始字符，然后，响应才能最终被解析并提取所需数据。
// the respone will come as string format and jQuery ajax will try to guess what's the dataType from
// the response, just to be sure i will ask Ajax to get the data as String (this is not necessary)
var http = $.ajax({
    url: 'http://finance.google.com/finance/info?client=ig&q=NASDAQ:TSLA',
    dataType: "string"
});

http.done(function(data){
    // slice the first 3 chars which makes the JSON to be commented
    var json = data.slice(3);

    // now this JSON is finally a valid JSON, so it can be parsed
    data = JSON.parse(json);

    // the data is now an Array of 1 element, we can now extract and print the data this way
    if(data.length == 1){
        $("#demo").text(data[0].id);

        // to print data using native Javascript
        document.getElementById("demo").innerText = data[0].id;
    }

    // in case the Array has more than 1 element and yet you want to print all of them,
    // you can iterate the Array
    for(i = 0; data.length > i; i++){
        var d = data[i];

        // do something the the iterated data
    }
});
谢谢您的确认，但是我该如何使其正确打印？ - jrseriel
我已经编辑了答案，以向您展示如何在“DOM”中使用它。 - Oscar Reyes
1
我会尽快更新答案，这样你就可以看到如何在DOM中解析和打印它。 - Oscar Reyes
没关系，另一种方法是将代码拆分为函数，但除此之外...我无法想出更简单的解析响应的方法，因为响应是一个带注释的 JSON。 - Oscar Reyes
我该如何使用 document.getElementById 与此相关？ - jrseriel
显示剩余7条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接