通过jQuery从JSON的外部链接获取数据答案

【问题标题】：Get data from external link of JSON by jQuery通过jQuery从JSON的外部链接获取数据
【发布时间】：2014-06-25 03:05:57
【问题描述】：

我正在尝试通过 jQuery 从 JSON 数据中读取数据。由于某些原因，总线无法正常工作。

这是我的 JSON 文件：http://goo.gl/PCy2th 这是我获取数据的代码：

$.getJSON("http://goo.gl/PCy2th", function(data){

  $.each(data.PlayListArray, function(key, val){
     alert(val.URL);
  });
});

这里是演示：http://jsfiddle.net/SVk77/

有解决办法吗？

【问题讨论】：

违反同源策略 - 外部资源需要支持jsonp 或CORS
查看浏览器控制台XMLHttpRequest cannot load http://goo.gl/PCy2th. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
@ArunPJohny 那么我怎样才能让它工作呢？像 fb 这样的一些网站通过 JSON 提供数据。我可以毫无问题地从这些服务器获取数据。
这就是我在第一条评论中指出的......您尝试访问的资源必须支持 CORS/jsonp
尝试在服务器端获取数据并发送到前端。

标签： javascript jquery json parsing

【解决方案1】：

您可以创建网络服务来获取所有音乐网址

PHP 代码：

<?php
    header('content-type: application/json; charset=utf-8');
    header("access-control-allow-origin: *");

$array = array("https://soundcloud.com/danial-sabagh/mane", "https://soundcloud.com/ajamband/gole-iran", "https://soundcloud.com/bibakofficial/kooch", "https://soundcloud.com/bibakofficial/mohammad-bibak-in-niz-bogzarad","https://soundcloud.com/kaishakhay/whine-and-kotch-j-chapri-f","https://soundcloud.com/amirtataloo/merci","https://soundcloud.com/amirtataloo/bikhiyal");// you can also apply your business logic and get url from database

echo json_encode(array("PlayListArray"=>$array));
    return;
?>

用于从 php web 服务调用和获取响应的 JQuery 代码

Javascript 代码：

$.ajax({
      url: 'getMusicURL.php',
      type: "GET",
      dataType:'json',
      success:function(data){

    console.log(data);//using object data you access all music array 

             for(var i=0;i<data.PlayListArray.length;i++){
          console.log(data.PlayListArray[i]);
     }
}
});

【讨论】：

在php文件顶部添加header('content-type: application/json; charset=utf-8'); header("访问控制允许来源：*");这 2 行允许所有 url 访问 web 服务

【解决方案2】：

你可以使用Cross-Origin XMLHttpRequest

来实现

即

$(document).ready(function(){        
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://goo.gl/PCy2th", true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {        
        // JSON.parse does not evaluate the attacker's scripts.
        var resp = JSON.parse(xhr.responseText);
      }
    }
    xhr.send();    
});

您返回 json 的服务器似乎不支持该请求。

Demo

【讨论】：