html页面数据的维护

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

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

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

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

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

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

具体作法如下：

html模板：showdata.html

<tr><!-- 自定义属性 --><td>{name}</td><td>{address}</td><td>{age}</td><td><a οnclick="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 οnclick="daleteStu('李四')" href="javascript:void(0);">删除</a></td>
</tr><tr><!-- 自定义属性 --><td>张三</td><td>北京朝阳区</td><td>30</td><td><a οnclick="daleteStu('张三')" href="javascript:void(0);">删除</a></td>
</tr><tr><!-- 自定义属性 --><td>王五</td><td>浙江杭州市</td><td>25</td><td><a οnclick="daleteStu('王五')" href="javascript:void(0);">删除</a></td>
</tr>
</table>

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

html页面数据的维护相关推荐

安卓服务器又维护了,数据互通|安卓部分区服服务器数据互通维护公告
原标题:数据互通|安卓部分区服服务器数据互通维护公告亲爱的球队经理人: 为了提供更好的游戏体验,同时也给各位玩家提供更多交流和互动的机会,<中超风云>预计于4月25日14点进行安卓平台服 ...
爬虫python爬取页面请求_Python网络爬虫第三弹《爬取get请求的页面数据》
一.urllib库 urllib是Python自带的一个用于爬虫的库,其主要作用就是可以通过代码模拟浏览器发送请求.其常被用到的子模块在Python3中的为urllib.request和urllib. ...
静态Web服务器-返回固定页面数据
1. 开发自己的静态Web服务器实现步骤: 编写一个TCP服务端程序获取浏览器发送的http请求报文数据读取固定页面数据,把页面数据组装成HTTP响应报文数据发送给浏览器. HTTP响应报文数据 ...
SAP MM PR Release Strategy 配置中Classification数据的维护
SAP MM PR Release Strategy 配置中Classification数据的维护 MM顾问都知道,在标准SAP系统中,采购申请审批策略的配置,有部分数据是不能通过TR传输的方式快捷的 ...
边缘数据中心维护的4个基本组件
来源:外电翻译边缘数据中心设施运行与数据中心相同的通用计算硬件,其中包括存储和网络设备.企业经常将边缘数据中心部署在非传统位置,例如移动通信基站.工厂车间,甚至是在野外.边缘数据中心为现场多个设备提 ...
爬虫抓取页面数据原理（php爬虫框架有很多）
爬虫抓取页面数据原理(php爬虫框架有很多 ) 一.总结 1.php爬虫框架有很多,包括很多傻瓜式的软件 2.照以前写过java爬虫的例子来看,真的非常简单,就是一个获取网页数据的类或者方法(这里的话 ...
html5父子页面数据传递,使用iframe标签嵌套页面时如何进行父子页面通讯/传值...
父页面使用iframe标签引入子页面 (使用本地文件) 父页面 function myFunction(e) { console.log("我是父页面的方法") } 引入本地路径的 ...
python爬虫获取的网页数据为什么要加[0-python爬虫解析页面数据的三种方式
re模块 re.S表示匹配单行 re.M表示匹配多行使用re模块提取图片url,下载所有糗事百科中的图片普通版 import requests import re import os if not ...
使用NHibernate绑定页面数据时，出现未能加载视图状态，正在向其中加载视图状态。。。。的Bug...
在使用NHibernate为页面数据控件绑定数据时,出现如下提示:"未为能加载视图状态,正在向其中加载视图状态的控件树必须与前一请求期间用于保存视图状态的控件树相匹配." 发生以上 ...

html页面数据的维护

html页面数据的维护相关推荐

最新文章

热门文章