站长网(Downzz.com)
站长网(Downzz.com)
当前位置:首页 > 站长教程 > 建站经验 > JSON教程
JavaScript解析远程json数据_JSON实例
时间:2019-10-28 02:55:59 围观:569 来源:Downzz
现在很多共享数据都是以json格式提供。

下面分享一段代码实例,它实现了读取远程json数据的功能。

具体是读取青岛市的气象信息,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
#weather {
  width: 800px;
  height: 500px;
  margin: 0 auto;
}
.div {
  width: 150px;
  height: 200px;
  background: deepskyblue;
  display: inline-block;
  line-height: 33px;
  text-align: center;
}
</style>
</head>
<body>
  <div id="weather">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
  </div>
<script type="text/javascript">
function ajaxFun(obj) {
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
 
  //2.判断请求方法
  var method = obj.method.toUpperCase();
 
  if (method == "GET") {
    xhr.open(method, obj.url + "?" + obj.data, true);
    xhr.send(null);
  } else if (method == "POST") {
    xhr.open(method, obj.url, true);
    xhr.send(obj.data);
  } else {
    console.error("请求方式有误,请选择get/post中的一种");
  }
 
  //3.监听服务器返回事件
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        obj.successFun(xhr.responseText);
      } else {
        obj.failFun("请求数据失败");
        console.warn(xhr.status);
      }
    }
  };
}
 
 
var divs = document.getElementsByClassName("div");
 
var obj = {
  method: "Get",
  url: "http://wthrcdn.etouch.cn/weather_mini?city=青岛",
  data: "",
  successFun: successFun,
  failFun: failFun
};
 
ajaxFun(obj);
 
function successFun(data) {
  var resultObj = JSON.parse(data).data;
  var forecastArray = resultObj.forecast;
 
  for (var i in forecastArray) {
    var array = forecastArray<i>;
    divs<i>.innerHTML = array.date
      + "<br>" + array.type
      + "<br>" + array.high
      + "<br>" + array.low
      + "<br>" + array.fengli
      + "<br>" + array.fengxiang;
  }
}
 
function failFun(data) {
  alert(data);
}
</script>
</body>
</html>


文章为作者独立观点不代表本网立场,未经允许不得转载。