Question

我正在尝试创建一个网站，在那里我可以从网址获取特定的json对象，然后在网站上显示它。我想要显示的字段是三个字段中的UV_INDEX。什么都没打印出来。我甚至不知道它是否得到了json对象。

<!DOCTYPE html>
<html>
<body>

<h2>EPA </h2>

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

<script>
var getJSON = function(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        resolve(xhr.response);
      } else {
        reject(status);
      }
    };
    xhr.send();
  });
};

getJSON('http://iaspub.epa.gov/enviro/efservice/getEnvirofactsUVDAILY/ZIP/92507/JSON').then(function(data) {
    document.getElementById('UV_INDEX').innerHtml=json.result;
    alert('Your Json result is:  ' + json.result); //you can comment this, i used it to debug

    result.innerText = data.result; //display the result in an HTML element
}, function(status) { //error detection....
  alert('Something went wrong.');
});
</script>

</body>
</html>

我为CORS问题添加了第三方chrome扩展。但是我得到了这个错误

Uncaught (in promise) ReferenceError: json is not definedmessage: "json is not defined"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: Error

Answer 1

您可以尝试使用Ajax plugin发出CORS请求，而不是从服务中提供CORS标头。

添加Jquery库并在此之后添加已安装的CORS ajax脚本：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.ajax-cross-origin.min.js"></script>

现在，只需在Ajax中添加 crossOrigin：true 即可创建跨域请求： E.g。

$.ajax({
    crossOrigin: true,
    url: "http://iaspub.epa.gov/enviro/efservice/getEnvirofactsUVDAILY/ZIP/92507/JSON/",
    success: function(data) {
        console.log(data);    
    }
});

您可以尝试在下面的演示页面中输入相同的URL来接收Json数据。请参阅live demo。

需要帮助从HTML中的URL读取JSON对象

1 个答案: