如何仅使用 JAVASCRIPT 获取数据值 [关闭]

Question

如何在不使用 eval 的情况下仅使用 Javascript 获取数据值？

jsonFlickrFeed({
    "title": "Recent Uploads tagged punctuation and atsign",
    "link": "http:\/\/www.flickr.com\/photos\/",
    "description": "",
    "modified": "2014-01-09T15:40:57Z",
    "generator": "http:\/\/www.flickr.com",
    "items": [
   {
   .....
   .....

Answer 1

基本上有人可以告诉我如何解析来自这个 url 的数据吗？ http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json

你不应该解析那个。这是一个老式的JSONP 回复。必须以一种或另一种方式对其进行评估。 JSONP 历史上用于在无法进行正确 CORS 的情况下执行 CORS（跨域资源共享）。

你必须在你的程序中定义jsonFlickrFeed，然后

<script type="application/javascript"
        src="http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json">
</script>

这将导致jsonFlickrFeed 与数据对象一起被调用。

注意：术语JSON 在这里被误用，因为jsonFlickrFeed 实际上是在接受一个JavaScript 对象；不是 JSON 字符串。

JSONP 回调： 通常您可以通过将&callback=foo 传递给JSONP 请求来配置回调的名称。我使用您提供的 flickr URL 尝试了此操作，但他们的 API 以某种方式运行不同或不支持用户命名的回调。检查他们的 API，看看您是否可以按照合理的命名约定指定回调。

---

这是一个功能齐全的演示，向您展示它的工作原理。我们将向控制台写出 3 条响应数据； title、link 和 modified。显然你可以对数据做任何你想做的事情。

<script>
  function jsonFlickrFeed (data) {
    console.log("title", data.title)
    console.log("link", data.link)
    console.log("modified", data.modified)
  }
</script>

<script type="application/javascript"
        src="http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json">
</script>

这是另一个演示，在 items 属性中显示图像

body {
  display: flex;
  flex-direction: row;
}

img {
  display: flex;
  max-height: 50px;
}

<script>
  function makeImage (src) {
    return Object.assign(document.createElement('img'), {src})
  }
  
  function jsonFlickrFeed (data) {
    for (let {media: {m}} of data.items)
      document.body.appendChild(makeImage(m))
  }
</script>

<script type="application/javascript"
        src="http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json">
</script>

在任一示例中，请注意我不必手动解析任何内容。这里没有 JSON，所以没有什么可以解析的。

Answer 2

根据您在下面的评论，您有以下代码：

var request = new XMLHttpRequest(); 
request.open("GET", "json/flickr.json", false); 
request.send(null) 
var response_object = (request.response); 
console.log(response_object); 
function jsonFlickrFeed(json){ 
   var obj = JSON.parse(json); 
   console.log(obj); 
}

问题在于响应不是 100% 格式正确的 JSON。主要内容嵌入似乎是一个函数调用：

`jsonFlickrFeed(main content here)`

您必须删除该包装器，然后才能对剩余的字符串使用 JSON.parse：

   var response_object = request.responseText.replace("jsonFlickrFeed(", "").substr(0,str.length-1));
   var obj = JSON.parse(response_object); 

另外，从您展示的代码来看，您还没有为 XHR 完成设置 load 回调。