热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html中通过JS获取JSON数据并加载的方法

本篇内容主要给大家讲了如何通过javascript解析JSON并得到数据后添加到HTML中的方法,需要的朋友参考下。

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

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

热门视频

JS如下


  

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

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

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

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

以上就是获取JSON数据并加载的方法。


推荐阅读
  • Android开发经验分享:优化用户体验的关键因素
    随着Android市场的不断扩展,用户对于移动应用的期望也在不断提高。本文探讨了在Android开发中如何优化用户体验,以及为何用户体验的重要性超过了技术本身。 ... [详细]
  • 本文介绍了FTP(文件传输协议)的基础知识,包括其定义、如何通过TCP建立控制和数据连接,以及主动模式与被动模式的区别。FTP作为一种重要的文件传输协议,在互联网数据交换中扮演着关键角色。 ... [详细]
  • 深入理解SAP Fiori及其核心概念
    本文详细介绍了SAP Fiori的基本概念、发展历程、核心特性、应用类型、运行环境以及开发工具等,旨在帮助读者全面了解SAP Fiori的技术框架和应用场景。 ... [详细]
  • 本文讨论了在处理分页数据时常见的低级错误,并提供了优化后的代码示例,以减少重复代码并提高可读性和维护性。 ... [详细]
  • 近期在维护旧项目时遇到一个问题,在iOS8环境下,UILabel无法正常显示文本。通过深入分析,我们发现这一现象与UILabel的使用方式有关,特别是在嵌套UILabel的情况下。 ... [详细]
  • 华为交换机VLAN间通信配置指南
    本文详细介绍了如何在华为交换机上配置VLAN间的通信,包括VLAN的创建、VLAN接口的配置以及Trunk和Access端口的设置。通过具体步骤指导读者完成网络配置,确保不同VLAN之间的设备能够互相访问。 ... [详细]
  • 这个报错出现在userDao里面,sessionfactory没有注入。解决办法:spring整合Hibernate使用test测试时要把spring.xml和spring-hib ... [详细]
  • 本题要求根据给定的正整数数组,通过合理排列各元素顺序,生成并输出所有可能组合中的最小值。例如,对于数组{3, 32, 321},正确的输出应为321323。 ... [详细]
  • 本文介绍了DOM中用于获取节点信息的关键属性,包括父节点、子节点列表、首个及末个子节点、相邻兄弟节点以及节点类型等,同时提供了每个属性的具体使用说明。 ... [详细]
  • 端到端自动化测试框架设计 - 以京东商品搜索为例的Web应用测试
    本文将对前文介绍的京东商品搜索功能的端到端自动化测试进行总结,涵盖使用WebStorm、Node.js、Mocha、WebDriverIO及Selenium构建的测试环境,并特别讨论了如何通过会话保持用户登录状态。 ... [详细]
  • 利用Selenium框架解决SSO单点登录接口无法返回Token的问题
    针对接口自动化测试中遇到的SSO单点登录系统不支持通过API接口返回Token的问题,本文提供了一种解决方案,即通过UI自动化工具Selenium模拟用户登录过程,从浏览器的localStorage或sessionStorage中提取Token。 ... [详细]
  • 本文探讨了Flutter和Angular这两个流行框架的主要区别,包括它们的设计理念、适用场景及技术实现。 ... [详细]
  • 本文详细对比了MySQL中的InnoDB与MyISAM两种存储引擎,从性能、事务处理能力、锁机制等多个维度进行了深入探讨,旨在为数据库设计者提供选择依据。 ... [详细]
  • 本文深入探讨了锚点技术的应用与实现,通过十个关键点帮助读者全面理解锚点在网页设计中的作用。 ... [详细]
  • 拖拉切割直线 ... [详细]
author-avatar
鐘文斌kebenJ
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有