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方法以及注意事项相关推荐

vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
html动态加载js方法,动态引入js四种方法总结
这次给大家带来动态引入js四种方法总结,动态引入js四种方法的注意事项有哪些,下面就是实战案例,一起来看一下. index.html test.jsalert("hello! I am te ...
js两种拼接字符串方法
js两种拼接字符串方法 function(msgArr) {//参数为一个数组,每一个对象为图片id和图片地址var len = msgArr.length;//第一种拼接方式,直接用"+& ...
python modis数据拼接_python调用HEG工具批量处理MODIS数据的方法及注意事项
下面的代码主要用于使用python语言调用NASA官方的MODIS处理工具HEG进行投影坐标转换与重采样批量处理主要参考 HEG的用户手册:https://newsroom.gsfc.nasa.go ...
php获取表单$_files,PHP中$_FILES的使用方法及注意事项说明
$_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...
js中toFixed方法的两个坑
js中toFixed方法的两个坑 toFixed返回结果是string,后续使用它计算会错误 toFixed返回结果可能出现负零-0.00 toFixed返回结果是string,后续使用它计算会错误 ...
html标签属性值拼接,js拼接url以及为html某标签属性赋值
记录 js拼接url 比如有些时候我们需要为某按钮实现跳转,可以利用下面的方式做到: function ReturnIndex() { var rex = RegExp("tools&quo ...
高效的JS 拼接字符串
今天在JS里面碰到循环数组里面拼接字符串,可想而知那速率肯定不高,所以就上网不断的查询资料来提高拼接的效率,然而网上的拼接方法和java里面的还是不同一下是网上的方法: function Strin ...
JS 连接MQTT的方法（mqtt.js的使用方法）
本文章是介绍 mqtt.js 的使用方法一.说明本文章使用的版本是 4.1.x ,没用最新版的原因是 4.2.x 以上版本会报错,具体报错可以看我的另一篇文章,点击查看. 使用的 4.1.x 版本 ...

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

JS拼接HTML方法以及注意事项相关推荐

最新文章

热门文章