JS拼接HTML方法以及注意事项

63 阅读 0 评论 42 点赞

我是靠谱客的博主朴实龙猫，最近开发中收集的这篇文章主要介绍JS拼接HTML方法以及注意事项，觉得挺不错的，现在分享给大家，希望可以做个参考。

在日常开发中如果使用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数组怎么样进行数据读取的操作。最后如果读者有更好的办法，欢迎留言探讨，谢谢。

以上就是朴实龙猫为你收集整理的JS拼接HTML方法以及注意事项的全部内容，希望文章能够帮你解决JS拼接HTML方法以及注意事项所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。