111 ajax获取数据jsrender显示数据

使用 axios实现 ajax获取天气数据并显示数据
界面如下：

引入bootstrap样式

<link rel="stylesheet" href="libs/bootstrap-4.5.3-dist/css/bootstrap.min.css">

1、通过dom操作实现数据的显示

引入jquery、axios

<script src="../js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>

获取数据

显示数据
给要显示数据的元素添加id，获取该元素修改元素内容。


效果

通过DOM的修改或添加实现数据的显示，比较麻烦。使用jsrender来显示数据会方便很多。

2、使用jsrender显示数据

jsrender基于模板来显示数据。
引入jsrender

<script src="../js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 放在jquery后面引入 -->
<script src="../js/jsrender-1.0.9/jsrender.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>

访问http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz，数据如下：

界面如下：

定义模板

将data.aqi这个对象绑定到模板上，基于模板显示数据，返回一串html代码。


效果如下：

传统的挨个取DOM元素然后赋值无法比较麻烦，灵活的运用模板引擎，效率会高很多。