您的位置：首页 > Web前端 > HTML

HTML标签拼接

2019-07-08 21:13 1586 查看

HTML标签+字符串拼接

本文章讲述如何实现将后端的数据传递给前端，然后前端自动生成对应的标签并将数据添加到该标签里

注意：
1、后端：python flask框架
2、前端 html + jquery-3.4.1.min.js

本文源码存放仓库：源码

先不要关心后端的代码，假设我现在有如下数据需要交给前端渲染成列表：

data_dict = {
'hostname': 'node1',
'ipaddr': '10.0.0.101',
'user': 'root',
}

1、下面先用low的方式将上面的数据渲染到html模板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td>hostname</td>
<td>ipaddr</td>
<td>user</td>
</tr>
</thead>
<tbody>

<tr>
{% for item in data.values() %}
<td>{{ item }}</td>
{% endfor %}
</tr>

</tbody>
</table>
</body>
</html>

注意：上面这种方法特别的low，现在data这个字典里只有hostname，ipaddr，user，几个key，但是如果后期我增加多了十个key或者我删除了几个key，经常变动，经常新增或者删除key，你就得手动的去改html模板。相当于是模板被写死了，不灵活，不变动，

2、那么可以用ajax发送get请求后端，获取到json数据，然后通过html拼接展示到前端
注意：这里是后端传json格式的数据给前端，这里使用到了jquery+ajax
展示页面：/index
数据获取：/data
前端/index通过ajax请求后端的url /data 获取到json数据，做处理后展示到/index页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">

<thead id="data_title">
</thead>

<tbody id="data_content">
</tbody>

</table>
</body>

{#  载入jquery  #}
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
$.ajax({
// 向/data url发送get请求
url:'/data',
type:'GET',
success:function(data){
// data是服务端返回的字符串
var res = JSON.parse(data)  // 对json数据反序列化
console.log(res)
// 通过$.each(字符串,funcation(key,value))循环获取字典里的数据

var d1 = ""
var d2 = ""
$.each(res,function(k,v) {
d1 += "<td>" + k + "</td>";
d2 += "<td>" + v + "</td>";
})
$('#data_title').html("<tr>" + d1 + "</tr>")
$('#data_content').html("<tr>" + d2 + "</tr>")

}
});

</script>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航