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标签拼接

HTML标签+字符串拼接

猜你喜欢