蚂蚁部落

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 134|回复: 0

[实例代码] js解析远程json数据代码实例

[复制链接]
发表于 2016-9-5 00:32:04 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2016-9-5 00:32 编辑

js解析远程json数据代码实例:
现在很多共享数据都是以json格式提供。
下面分享一段代码实例,它实现了读取远程json数据的功能。
具体是读取青岛市的气象信息,代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复返回顶部 返回列表