js拼接html如何进行值转换,HTML标签拼接

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模板

Title

hostnameipaddruser

{% for item in data.values() %}

{{ item }}

{% endfor %}

注意：上面这种方法特别的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页面

Title

{# 载入jquery #}

$.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 += "

" + k + "";

d2 += "

" + v + "";

})

$('#data_title').html("

" + d1 + "")

$('#data_content').html("

" + d2 + "")

}

});

效果图：

标签：HTML,标签,前端,json,html,ajax,拼接,key,data

来源： https://blog.51cto.com/12643266/2418339