Ajax获取json数组并用vue生成表格

最新推荐文章于 2024-05-11 17:34:04 发布

横石拦浪

最新推荐文章于 2024-05-11 17:34:04 发布

阅读量1.2k

点赞数 2

分类专栏：具体的问题前端

本文链接：https://blog.csdn.net/qq_20786911/article/details/102862424

版权

具体的问题同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端

12 篇文章 0 订阅

订阅专栏

今天尝试前后端分离，用Ajax结合Vue框架获取springMVC生成RestfulAPI的数据，JSON数组是由一个List对象生成的。最后生成的JSON数据的格式大概是这样的，里面主要是天气数据的信息和站点信息：

[{“id”:null,“stationId”:“59488”,“year”:“1962”,“month”:null,“day”:null,“temAVG”:"22.5 ",“temH”:"35.3 ",“temL”:"6.0 ",“pre”:"1350.6 ",“prsAVG”:"1011.4 ",“prsH”:“缺测”,“prsL”:“缺测”,“rhuAVG”:"77.8 ",“rhuL”:“缺测”,“ssd”:"6.2 ",“winAVG”:"3.9 ",“winH”:“缺测”,“winD”:null,“winGustH”:“缺测”,“winGustD”:null,“stationInfo”:{“stationId”:“59488”,“province”:“广东”,“stationName”:“珠海”,“latitude”:null,“longitude”:null,“height”:null}},{“id”:null,“stationId”:“59488”,“year”:“1963”,“month”:null,“day”:null,“temAVG”:"22.8 ",“temH”:"37.1 ",“temL”:"4.7 ",“pre”:"1200.9 ",“prsAVG”:"1012.0 ",“prsH”:“缺测”,“prsL”:“缺测”,“rhuAVG”:"75.1 ",“rhuL”:“缺测”,“ssd”:"7.0 ",“winAVG”:"3.5 ",“winH”:“缺测”,“winD”:null,“winGustH”:“缺测”,“winGustD”:null,“stationInfo”:{“stationId”:“59488”,“province”:“广东”,“stationName”:“珠海”,“latitude”:null,“longitude”:null,“height”:null}}]

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/historyyear.css">
  <script src="../js/vue.js" type="text/javascript"> </script>
</head>
<body>
            <div id="weatherLists">
              <div class="datatitle" align="center">{{weatherLists[0].stationInfo.stationName}}站1962-2018每年数据摘录</div>
            <table class="table table-bordered table-condensed" align="center" >
                            <tr>
                                <th rowspan="2">年</th>
                                <th colspan="3">气温</th>
                                <th colspan="3">气压</th>
                                <th colspan="2">湿度</th>
                                <th colspan="3">风速</th>
                                <th rowspan="2">平均日照时数(h)</th>
                                <th rowspan="2">年雨量(mm)</th>
                            </tr>
                            <tr>
                                <th>最高气温(℃）</th>
                                <th>平均气温(℃）</th>
                                <th>最低气温(℃）</th>
                                <th>最高气压(hpa)</th>
                                <th>平均气压(hpa)</th>
                                <th>最低气压(hpa)</th>
                                <th>平均湿度(%)</th>
                                <th>最低湿度(%)</th>
                                <th>平均风速(m/s)</th>
                                <th>最大风速(m/s)</th>
                                <th>极大风速(m/s)</th>
                            </tr>
                            <tr v-for="weather in weatherLists">
                                  <td v-text="weather.year"></td>
                                  <td v-text="weather.temH"></td>
                                  <td v-text="weather.temAVG"></td>
                                  <td v-text="weather.temL"></td>
                                  <td v-text="weather.prsH"></td>
                                  <td v-text="weather.prsAVG"></td>
                                  <td v-text="weather.prsL"></td>
                                  <td v-text="weather.rhuAVG"></td>
                                  <td v-text="weather.rhuL"></td>
                                  <td v-text="weather.winAVG"></td>
                                  <td v-text="weather.winH"></td>
                                  <td v-text="weather.winGustH"></td>
                                  <td v-text="weather.ssd"></td>
                                  <td v-text="weather.pre"></td>
                              </tr>
                        </table>
              </div>
  <script src="../js/jquery.js"></script>
  <script src="../js/bootstrap.js"></script>
  <script src="../js/index.js"></script>
</body>
</html>

index.js中的内容

var vm=new Vue(
  {
    el:'#weatherLists',
    data:{
      weatherLists:[],
  },
    created:function(){
      var self=this;
      $.ajax({
        type: 'GET',
        dataType:'json',
        url: 'http://localhost/history/weather',
        success: function(data){
            self.weatherLists=data;
            console.log(data);
      },
      error:function(){
        alert("获取失败");
      }
    })
    }
  })

横石拦浪

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ajax获取json数组并用vue生成表格

今天尝试前后端分离，用Ajax结合Vue框架获取springMVC生成RestfulAPI的数据，JSON数组是由一个List对象生成的。最后生成的JSON数据的格式大概是这样的，里面主要是天气数据的信息和站点信息：[{“id”:null,“stationId”:“59488”,“year”:“1962”,“month”:null,“day”:null,“temAVG”:"22.5 ",“tem...
复制链接

扫一扫

专栏目录