发门网
111 ajax获取数据jsrender显示数据
创始人
2024-03-30 15:30:34
0次

文章目录

  • 1、通过dom操作实现数据的显示
  • 2、使用jsrender显示数据

使用 axios实现 ajax获取天气数据并显示数据
界面如下：
在这里插入图片描述
引入bootstrap样式

在这里插入图片描述

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

引入jquery、axios

获取数据
在这里插入图片描述
显示数据
给要显示数据的元素添加id，获取该元素修改元素内容。
在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述
通过DOM的修改或添加实现数据的显示，比较麻烦。使用jsrender来显示数据会方便很多。

2、使用jsrender显示数据

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

访问http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz，数据如下：
在这里插入图片描述
界面如下：
在这里插入图片描述

定义模板
在这里插入图片描述
将data.aqi这个对象绑定到模板上，基于模板显示数据，返回一串html代码。
在这里插入图片描述
在这里插入图片描述
效果如下：
在这里插入图片描述
传统的挨个取DOM元素然后赋值无法比较麻烦，灵活的运用模板引擎，效率会高很多。

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：基于springboot的工资管理系统

下一篇：牛客竞赛每日俩题 - Day5

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播，要解决的几个问题是：1&...
Windows10添加群晖磁盘... 在使用群晖NAS时，我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章，在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
Fluent中创建监测点 1 概述某些仿真问题，需要创建监测点，用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装（Wind... 前言：刚换了一台电脑，里面所有东西都需要重新配置，习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile，这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '('，')'，'{'，'}'...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF，目录中的页码并非PDF中直接索引的页码...