JS拼接HTML页面的方法教程
程序员文章站
2022-03-08 22:30:16
在日常开发中如果使用ajax进行异步刷新页面局部数据,会常用到js来拼接html模块页面。在拼接过程中,尤其注意函数,变量的拼接处理。以下用js来实现拼接目标页面块:
目标展示页面块:(以一个需要刷...
在日常开发中如果使用ajax进行异步刷新页面局部数据,会常用到js来拼接html模块页面。在拼接过程中,尤其注意函数,变量的拼接处理。以下用js来实现拼接目标页面块:
目标展示页面块:(以一个需要刷新的table为例)
后台处理hashmaps (list)集合,转化为jsonarray,返回给前端ajax回调函数
前端调用的js方法,根据回调函数返回值拼接table内容,实现刷新:
一.首先定义data来拼接table页面中数据展示块,也就是 图一 foreach循环遍历的数据块。
仔细注意函数及其内部参数的拼接,如图所示,这个很重要,不然你拼接后的函数很有可能不能用。
二.然后紧接着拼接table的头部项,定义show拼接,最后把data加入到show内部,完成table数据刷新。
注意:这里关于data拼接到show的方式,可能有人会直接把拼接data的for循环直接加到show里,来完成拼接。我亲测过是不行的,必须分开写完成组合拼接。
这里也稍微介绍了一下怎么样将 list(hashmap) 转化为 jsonarray,对于返回的json数组怎么样进行数据读取的操作。