JS传值与应用
问题提出:在进行页面书写的时候,有时候需要进行动态页面拼接,在动态拼接的时候,涉及到函数的调用,函数的传值可能是HTML标签,或者含有json的标签,这样在传值时就有可能出现问题,由于”“的存在,html会对其进行解析,把不该显示的元素进行了显示,这里提出一种解决思路。
如上图所示,我的detail变量和poet变量都是从服务器上获取的数据,其中poet为字符串,detail为json格式数据,这里对它进行了组装,组装成一个名为poetinfo的JSON数组,detail中含有了大量的html标签,其形式如下图所示,linkhtml是我需要动态拼接的组件,这里调用了一个函数为NewView(),这里需要将poetinfo的JSON传入NewView函数中使用。
开始的时候想的是直接将JSON作为NewView的参数写入写法为:
linkHtml = "<div style='text-align:center'>" + "<a id=\"" + poet +
"\" href='javascript: NewView(\"" +
poetinfo +"\")' class='expand'+v.poetname +"</a>" + "<span style='color:blue;font-size:7px'>" + v.year + "</span>" + "</div>";
如果不用字符串形式,传过去的JSON将变为形为”[object object]“的字符串,如果提前使用了JSON.Stringify()函数,再进行传出,则会出现这里的值出现在div容器中,这是因为再detail中有引号,打乱了原本的标签结构。
这里有两种解决思路,第一种是将从服务器获取的数据全部转存到一个JSON,然后在每次遍历时设置一个索引,通过数字索引访问JSON对象,这种方法不够直观,并且索引的计算和数据的储存过大。
这里提出一种想法,方便在写动态拼接大量标签的网页时传值的方法,同时适用的场景还可以是,在我们使用JS的时候,有时候需要从服务器获取数据,为了减小服务器压力,不每次都从服务器调用数据,我们可以采用利用标签属性存值的方式进行储存和调用。
问题解决:
将JSON储存在某一个标签的某一个属性中,在储存的时候为了不破坏结构,可以先对其进行编码,编码的方法,JS自带的有
window.btoa()
方法和网页中使用的encodeURIComponent()
方法,第一种方法创建一个 base-64 编码的字符串,使用 “A-Z”, “a-z”, “0-9”, “+”, “/” 和 “=” 字符来编码字符串,第二个就是网页中使用的URL编码,这样就可以进行包装不破坏拼接标签的结构在编码前需要将其转化为字符串类型也就是使用
JSON.stringify()
,总的代码为encodeURIComponent(JSON.stringify(poetinfo))
,然后将其存放在一个标签中,并用一个值来给这个标签设置id属性。在传值的时候将标签的id传出去,方便DOM操作,在其他函数调用时,可以通过id进行DOM操作,获取DOM属性,获取的方法可以是原生的
Document.getelementById("id").getAttribute("名称")
,也可以采用Jequry的$("#id").attr("属性名称")
然后获取到这个属性后,先进行解码,然后再使用
JSON.prase()
就可以获取原来的JSON数据了,使用btoa加密的代码,解码方式为window.atob()
,使用URL加密的解密方法为decodeURIComponent()
,综合代码为JSON.parse(decodeURIComponent($('#' + poet).attr("poetinfo")));
最新文章
- Java序列化与反序列化
- 阿里 RocketMQ 安装与简介
- ADF_Database Develop系列2_设计数据库表之Table Partitions/Create Users/Generate DDL
- 2016.04.28,英语,《Vocabulary Builder》Unit 20
- 对Spring <;context:annotation-config/>;的理解
- JsRender系列demo-10
- 在线API,桌面版,jquery,css,Android中文开发文档,JScript,SQL掌用实例
- asp.net读取Excel中的数据问题
- Angularjs,WebAPI 搭建一个简易权限管理系统
- Android学习笔记之Spinner
- 点聚weboffice隐藏自带工具栏
- Struts2中五个重要的常量
- 逆向工程-真码保存在系统文件破解QQ游戏对对碰助手
- [转]innodb的锁时间
- [附POC]Apache Struts2最新(CVE-2017-5638,S02-45)POC
- 初始化集合的花样new HashMap<;String, String>;{ {put(";str1";:";abc";);} }(转)
- 简单了解如何使用vue-router和vue-resource
- codeforces 894B - Ralph And His Magic Field - [数学题]
- core dump文件分析和调试
- Java字符串常量池是什么?为什么要有这种常量池?
热门文章
- elk使用微信ElartAlert企业微信告警,自定义告警内容
- 在 Linux 中找出内存消耗最大的进程
- 华为设备配置ssh-client命令
- 插入排序算法(Java代码实现)
- 云原生分布式 PostgreSQL+Citus 集群在 Sentry 后端的实践
- go-zero docker-compose搭建课件服务(四):生成Dockerfile
- netty系列之: 在netty中使用 tls 协议请求 DNS 服务器
- Codeforces Round #811 (Div. 3)D. Color with Occurrences
- 关于Redis的,你了解多少?来看看我的笔记
- Redis的攻击手法