AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

現在大家寫寫了一個簡單的ajax獲取數據的小示例，希望能幫助需要幫助的。

?

html代碼：

1 <table border="1" > 2 <!--因為在谷歌上會自動添加tbody標簽，其他瀏覽器不會有這標簽，所以添加tbody是為了選取元素時不會發生混亂。--> 3 <tbody> 4 <tr> 5 <th>日期</th> 6 <th>最高溫度</th> 7 <th>最低溫度</th> 8 <th>天氣</th> 9 </tr> 10 </tbody> 11 </table>

?

javascript代碼：

<script> //創建ajax對象var xhr=new XMLHttpRequest();//監聽相應xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){//數據獲取成功//JSON.parse把數組格式的字符串轉換成真正的數組var data=JSON.parse(xhr.responseText)for(var i= 0;data.length>i;i++ ){var tr= document.createElement('tr');var dateTd = document.createElement('td');dateTd.innerHTML=data[i].date;var maxTd = document.createElement('td');maxTd.innerHTML=data[i].max_temperature;var minTd = document.createElement('td');minTd.innerHTML=data[i].min_temperature;var weatherTd = document.createElement('td');weatherTd.innerHTML=data[i].weather;//將td掛上tr上tr.appendChild(dateTd);tr.appendChild(maxTd);tr.appendChild(minTd);tr.appendChild(weatherTd);document.getElementsByTagName("tbody")[0].appendChild(tr)}}else{console.log(加載失敗)}}}//發送請求xhr.open("GET","weather.json","true");xhr.send(null) </script>

　　json數據：

[{"date":"2017-12-12","max_temperature":40,"min_temperature":30,"weather":"天晴" },{"date":"2017-12-13","max_temperature":38,"min_temperature":20,"weather":"雨" },{"date":"2017-12-14","max_temperature":35,"min_temperature":25,"weather":"天晴" },{"date":"2017-12-15","max_temperature":30,"min_temperature":25,"weather":"小雨" },{"date":"2017-12-16","max_temperature":40,"min_temperature":32,"weather":"天晴" },{"date":"2017-12-17","max_temperature":25,"min_temperature":20,"weather":"陰" },{"date":"2017-12-18","max_temperature":39,"min_temperature":35,"weather":"陣雨" }]

　　效果：

?

轉載于:https://www.cnblogs.com/pqh1458/p/8032127.html

總結

以上是生活随笔為你收集整理的js ajax数据的获取小示例 天气信息填充表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。