解析JSON服务器响应

我正在使用wunderground API来练习我的JS，并且有一个关于如何解析他们在拨打电话时返回的JSON响应的问题。解析JSON服务器响应

我有一个简单的函数，我正在调用URL并接收响应并将其发送到iframe。在iframe中，我看到了原始的JSON。我想知道的是如何解析JSON并在iframe中显示解析的信息。（或一个div如果更简单）

我假设它是JSON.parse的一些变体，但我还没有能够得到它以我想要的方式工作。

另外我更喜欢避免jquery我想用普通的JS。

function conditions(){ 
    var zip = document.getElementById("zip").value; 
    var url = "http://api.wunderground.com/api/<API_KEY>/conditions/q/" + zip + ".json" 
    { 
    window.open(url,"frame"); 
    }

更新：这是我现在拥有的。我知道我正在执行这个错误。我还遇到同样的原产地问题，不得不绕过Chromes安全测试。任何建议表示赞赏。

function conditions() { 

GET_JSON = function(callback){ 
var c = document.getElementById("zip").value; 
var x = new String("http://api.wunderground.com/api/KEY/conditions/q/" + c + ".json" +"?callback=JSONCallback"); 
    var req = new XMLHttpRequest(); 
    req.open("GET", x, true); 
    req.onreadystatechange = function(){ 
     if(this.readyState==4){ 
      callback(JSON.parse(req.responseText)); 
     } 
    } 
    req.send(null); 
} 
JSONCallback = function(JSONObj){ 
    alert(JSONObj); 
}; 
GET_JSON(JSONCallback); 
}

来源

2014-01-15 user2941841

您不需要使用window.open或iframe来请求JSON。您将需要使用XMLHttpRequest对象，并希望它们支持CORS，因为有相同的源策略。如果没有，希望他们支持JSONP。 – epascarello

您需要使用AJAX，并在'onreadystatechange'函数中调用'JSON.parse'并将您想要的内容写入新窗口。由于AJAX同源策略，您可能无法执行此操作，因此您可能需要在服务器上使用代理功能。 – Barmar

为什么使用iFrame来代替AJAX调用？你确定他们的API允许跨域请求吗？如果他们不这样做，那么您需要在服务器上使用代理脚本。 –

如果wunderground使用相同类型的API为wiki media的不知道。然而，下面是一个例子，你将如何执行JSONP（在这里阅读：JSONP），它可以让你查询一个页面，尽管有跨域请求。

如果您阅读此问题：Trying to search wunderground locations with javascript, jquery, and html，您可以看到建议使用JSONP。因此，对以下示例的一个小修改将使您开始着手如何从网站获取结果。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Wikipedia JSON Grabber</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
     <style> 
     div{ 
      position: relative; 
      background-color: white; 
     } 
     </style> 
     <script> 
     // Function call the Wikipedia API 
     function doFetch() { 
      var tmpScript = document.createElement("script"); 
      tmpScript.src = "http://en.wikipedia.org/w/api.php?" + 
        "format=json" + 
        "&callback=gotFetch" + 
        "&action=query" + 
        "&titles=json" + 
        "&prop=revisions" + 
        "&rvprop=content"; 
      document.body.appendChild(tmpScript); 
     } 

     // Callback to trigger whenever the API responds 
     function gotFetch(data) { 
      var parent = document.createElement("div"), 
        depth = 0; 
      document.body.appendChild(parent); 
      console.log("Got data"); 
      for (var t in data) { 
       console.log(data[t]); 
       printData(data, parent, depth); 
      } 
     } 

     // Recursively print out the object received to console 
     function printData(data, parent, depth) { 
      for (var prop in data) { 

       var newDiv = document.createElement("div"); 
       newDiv.style.left = (10 * (depth++)) + "px"; 
       parent.appendChild(newDiv); 

       if (typeof data[prop] === "object") { 
        newDiv.innerHTML = prop; 
        printData(data[prop], newDiv, depth); 
       } else { 
        newDiv.innerHTML = data[prop]; 
       } 
      } 
     } 

     function main() { 
      doFetch(); 
     } 
     </script> 
    </head> 
    <body onload="main();"> 
     <div></div> 
    </body> 
</html>

来源

2014-01-15 20:00:54 zero298

我从wunderground样本JSON网址：

var url = "http://api.wunderground.com/api/<API_KEY>/conditions/q/CA/San_Francisco.json";

其输出JSON是：

{"response":{"version":"0.1","termsofService":"http://www.wunderground.com/weather/api/d/terms.html","features":{"conditions":1}},"current_observation":{"image":{"url":"http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png","title":"Weather Underground","link":"http://www.wunderground.com"},"display_location":{"full":"San Francisco, CA","city":"San Francisco","state":"CA","state_name":"California","country":"US","country_iso3166":"US","zip":"94101","magic":"1","wmo":"99999","latitude":"37.77500916","longitude":"-122.41825867","elevation":"47.00000000"},"observation_location":{"full":"SOMA - Near Van Ness, San Francisco, California","city":"SOMA - Near Van Ness, San Francisco","state":"California","country":"US","country_iso3166":"US","latitude":"37.773285","longitude":"-122.417725","elevation":"49 ft"},"estimated":{},"station_id":"KCASANFR58","observation_time":"Last Updated on January 15, 12:12 PM PST","observation_time_rfc822":"Wed, 15 Jan 2014 12:12:06 -0800","observation_epoch":"1389816726","local_time_rfc822":"Wed, 15 Jan 2014 12:12:10 -0800","local_epoch":"1389816730","local_tz_short":"PST","local_tz_long":"America/Los_Angeles","local_tz_offset":"-0800","weather":"Partly Cloudy","temperature_string":"69.8 F (21.0 C)","temp_f":69.8,"temp_c":21.0,"relative_humidity":"28%","wind_string":"From the WNW at 2.0 MPH","wind_dir":"WNW","wind_degrees":295,"wind_mph":2.0,"wind_gust_mph":0,"wind_kph":3.2,"wind_gust_kph":0,"pressure_mb":"1026","pressure_in":"30.29","pressure_trend":"-","dewpoint_string":"35 F (2 C)","dewpoint_f":35,"dewpoint_c":2,"heat_index_string":"NA","heat_index_f":"NA","heat_index_c":"NA","windchill_string":"NA","windchill_f":"NA","windchill_c":"NA","feelslike_string":"69.8 F (21.0 C)","feelslike_f":"69.8","feelslike_c":"21.0","visibility_mi":"10.0","visibility_km":"16.1","solarradiation":"--","UV":"3","precip_1hr_string":"0.00 in (0 mm)","precip_1hr_in":"0.00","precip_1hr_metric":" 0","precip_today_string":"0.00 in (0 mm)","precip_today_in":"0.00","precip_today_metric":"0","icon":"partlycloudy","icon_url":"http://icons-ak.wxug.com/i/c/k/partlycloudy.gif","forecast_url":"http://www.wunderground.com/US/CA/San_Francisco.html","history_url":"http://www.wunderground.com/weatherstation/WXDailyHistory.asp?ID=KCASANFR58","ob_url":"http://www.wunderground.com/cgi-bin/findweather/getForecast?query=37.773285,-122.417725"}}

那么现在我们如何想获得这个输出！？我们有2个不同的解决方案：

1-旧解决方案是使用AJAX来获取JSON作为一个字符串，然后解析它作为一个对象，像这样：

GET_JSON = function(callback){ 
    var req = new XMLHttpRequest(); 
    req.open("GET", url, true); 
    req.onreadystatechange = function(){ 
     if(this.readyState==4){ 
      callback(JSON.parse(req.responseText)); 
     } 
    } 
    req.send(null); 
} 
JSONCallback = function(JSONObj){ 
    alert(JSONObj); 
}; 
GET_JSON(JSONCallback);

但这里的问题是，如果你这样做，在你的网站，你将面临与此错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
    Origin 'http://mydomain.com' is therefore not allowed access.

2-没问题，wunderground weather api支持JSONP，它会帮助我们解决这个问题，我们必须只需打个电话JSONP，棘手的点这里是的，我们不会使用定期ajax解决方案了：

GET_JSON = function(callback){ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = url + "?callback=" + callback; 
    document.body.appendChild(script); 
} 
window.JSONCallback = function(JSONObj){ 
    alert(JSONObj); 
}; 
GET_JSON("JSONCallback");

有一个非常棘手的一点是非常重要的。如果您检查最后一行而不是将回调对象作为参数传递，我已经传递了它的名称，为什么？

答案是，如果我们想要有一个JSONP调用，我们必须将0123.queryString的回调函数名称传递给它。像这样：

url = "http:// ... .json?callback=JSONCallback";

，这是所有你需要知道要访问您的JSON对象，没有你需要解析的字符串。

来源

2014-01-15 21:37:12

感谢您为帮助我而努力。然而，我不确定如何实施你的建议。我更新了现在在主文章中的脚本。我现在需要解决什么问题？ – user2941841

你已经在你的代码中混合了ajax调用和jsonp，如果你用我的第二个GET_JSON替换GET_JSON（不使用XmlHttpRequest），你的问题就解决了。 –

解析JSON服务器响应

回答

相关问题