资讯专栏INFORMATION COLUMN

从JSON中读取数据追加到HTML中

khs1994 / 550人阅读

摘要:在写内容逻辑重复性的页面时,用数据可以显著提高编程效率,并且便于后期的数据维护。因此,在视频专题页面,需要展示多列视频数据,我选择了用。解决办法是利用方法,格式化,然后再添加进即可,在中应该还要用转回来。

在写内容逻辑重复性的页面时,用json数据可以显著提高编程效率,并且便于后期的数据维护。因此,在视频专题页面,需要展示多列视频数据,我选择了用json。

HTML如下(只展示重点部分,需要引用JQ)

热门视频

JS如下


    

注释部分可不看,不影响内容。

首先要新建json文件,json文件需注意的问题是:json对数据格式有要求,不识别url中的各类符号,因此会提示错误,如果不修复,则会阻断JS进程,造成数据在页面不显示,这个问题我找了好久才发现,而且json问题在js中不会报错。解决办法是利用encode方法,格式化url,然后再添加进json即可,在html中应该还要用decode转回来。

第二个坑是插入html到某个标签中,有四个方法,用after就可以实现,不要用反了。

第三点是需要注意,不要在拼接字符串的时候忘掉加号,少一个就会出问题,一个小问题会找好久才发现,而且拼接错误JS不会报错,很难发现。

效果如下:

以上就是几个小问题明天继续补充。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51573.html

相关文章

  • JSON读取数据追加HTML

    摘要:在写内容逻辑重复性的页面时,用数据可以显著提高编程效率,并且便于后期的数据维护。因此,在视频专题页面,需要展示多列视频数据,我选择了用。解决办法是利用方法,格式化,然后再添加进即可,在中应该还要用转回来。 在写内容逻辑重复性的页面时,用json数据可以显著提高编程效率,并且便于后期的数据维护。因此,在视频专题页面,需要展示多列视频数据,我选择了用json。 HTML如下(只展示重点部分...

    habren 评论0 收藏0
  • JSON读取数据追加HTML

    摘要:在写内容逻辑重复性的页面时,用数据可以显著提高编程效率,并且便于后期的数据维护。因此,在视频专题页面,需要展示多列视频数据,我选择了用。解决办法是利用方法,格式化,然后再添加进即可,在中应该还要用转回来。 在写内容逻辑重复性的页面时,用json数据可以显著提高编程效率,并且便于后期的数据维护。因此,在视频专题页面,需要展示多列视频数据,我选择了用json。 HTML如下(只展示重点部分...

    Jaden 评论0 收藏0
  • Python3网络爬虫实战---31、数据存储:文件存储

    摘要:如果该文件已存在,文件指针将会放在文件的结尾。运行结果以上是读取文件的方法。为了输出中文,我们还需要指定一个参数为,另外规定文件输出的编码。 上一篇文章:Python3网络爬虫实战---30、解析库的使用:PyQuery下一篇文章:Python3网络爬虫实战---32、数据存储:关系型数据库存储:MySQL 我们用解析器解析出数据之后,接下来的一步就是对数据进行存储了,保存的形式可以...

    dreamans 评论0 收藏0
  • 后端知识点总结——NODE.JS基础

    摘要:后端知识点总结基础不是是一种软件开发平台,它的竞争对象历史第一次有一种语言可以通吃前后端网站阿里云镜像版本年初年中年底最新版本功能强大可靠,适合大型企业级项目简单易用适合互联网项目易用适合平台性能好适合服务器端密集型项目不适合密集型项目密集 后端知识点总结——NODE.JS基础 1.Node.js Node.js不是JS,是一种软件开发平台,它的竞争对象JSP/PHP/ASP.NET...

    Freeman 评论0 收藏0
  • 多线程+代理池爬取天天基金网、股票数据(无需使用爬虫框架)

    摘要:本次使用天天基金网进行爬虫,该网站具有反爬机制,同时数量足够大,多线程效果较为明显。技术路线代理池多线程爬虫与反爬编写思路首先,开始分析天天基金网的一些数据。一旦使用多线程,则需要考虑到数据的读写顺序问题。 @[TOC] 简介 提到爬虫,大部分人都会想到使用Scrapy工具,但是仅仅停留在会使用的阶段。为了增加对爬虫机制的理解,我们可以手动实现多线程的爬虫过程,同时,引入IP代理池进行...

    jaysun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<