html页面数据的维护

来源：互联网发布：二手淘宝网首页编辑：程序博客网时间：2024/05/16 14:12

在Java Web开发中，后台页面开发技术使用JSP，有时候我们需要维护两份数据，一份是后台传递的数据，还有一份是js产生的数据，这两份数据维护起来还是比较麻烦的，

当一个新人接触一个已开发完的项目，现在他需要维护这些数据，需要做相应的修改，那么有两个麻烦：

a) 修改了一个却忘记修改另一个

b) 测试验证的时候需要做相应的操作才能验证是否修改正确

那么问题来了，如何解决这个问题呢？

根据要填充的数据设置一个html模板：这样可以避免直接在js中拼接html元素，造成后续的一个维护难度。

具体作法如下：

html模板：showdata.html

<tr>    <!-- 自定义属性 -->    <td>{name}</td>    <td>{address}</td>    <td>{age}</td>    <td>        <a onclick="daleteStu('{name}')" href="javascript:void(0);">删除</a>    </td></tr>

页面：testtemplate.jsp

<%@ page language="java" pageEncoding="utf-8"%><%@ page contentType="text/html;charset=UTF-8" language="java" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  </head>    <body>  <script type="text/template_showdata">  <%@ include file="/htmltemplate/showdata.html" %>  </script>    <table id="tableData"></table>  </body>  <script type="text/javascript" src="<%=basePath %>/js/jquery-1.7.2.js"></script>  <script type="text/javascript" src="<%=basePath %>/js/testtemplate.js"></script></html>

js: testtemplate.js

$(function() {var html = $("script[type='text/template_showdata']").html();var dta = {    "rows": [{        "name": "李四",        "address": "湖南长沙市",        "age": 20    }, {    "name": "张三",        "address": "北京朝阳区",        "age": 30    }, {    "name": "王五",        "address": "浙江杭州市",        "age": 25    }]}; //定义一个数组，用来接收格式化合的数据      var arr = [];      //对数据进行遍历      $.each(dta.rows, function(i, o) {          //这里取到o就是上面rows数组中的值          arr.push(formatTemplate(o, html));      });      //好了，最后把数组化成字符串，并添加到table中去。      $('#tableData').append(arr.join(''));  });function formatTemplate(dta, tmpl) {    //格式化内容，指定要格式化的字段名和格式化函数    var format = {        name: function(x) {            return x        }    };    return tmpl.replace(/{(\w+)}/g, function(m1, m2) {        if (!m2)            return "";        return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];    });}

根据html模板，最后生成的html内容为：

<table id="tableData"> <tr>    <!-- 自定义属性 -->    <td>李四</td>    <td>湖南长沙市</td>    <td>20</td>    <td>        <a onclick="daleteStu('李四')" href="javascript:void(0);">删除</a>    </td></tr>    <tr>    <!-- 自定义属性 -->    <td>张三</td>    <td>北京朝阳区</td>    <td>30</td>    <td>        <a onclick="daleteStu('张三')" href="javascript:void(0);">删除</a>    </td></tr>  <tr>    <!-- 自定义属性 -->    <td>王五</td>    <td>浙江杭州市</td>    <td>25</td>    <td>        <a onclick="daleteStu('王五')" href="javascript:void(0);">删除</a>    </td></tr></table>

上述操作过后，以后在js中只需要设置相应的数据，进行填充就好了，样式的设置还是在html中，这样好维护一些

0 0