JavaScript解析遠端json資料

admin發表於2017-02-02
JavaScriptJSON
現在很多共享資料都是以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>


相關文章