HTML标签拼接_app

概述HTML标签+字符串拼接本文章讲述如何实现将后端的数据传递给前端，然后前端自动生成对应的标签并将数据添加到该标签里注意： 1、后端：python flask框架 2、前端 html + jquery-3.4.1.min.js 本文源码存放仓库：源码先不要关心后端的代码，假设我现在有如下数据需要交给前端渲染成列表： data_dict = { ‘hostname‘: ‘node1‘, 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>

效果图：

总结

以上是内存溢出为你收集整理的HTML标签拼接全部内容，希望文章能够帮你解决HTML标签拼接所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/1079425.html