随着HTML5技术的逐渐成熟,越来越多的被大家使用。 今天就遇到了一个 HTML5的例子,发现与往日的jsp页面相似,但也有很多区别,所以记录下来,以备后用。
HTML5 所到底还是个HTML页面,不像jsp可以直接写java代码,或者是使用JSTL标签引入jar包。首先看一下二者在此的区别吧。
jsp引入jar包:
HTML5导入js文件:
可以看到HTML5引入js文件采用的是相对路径或者绝对路径的方式,这一点jsp也是可以使用的。
主要说一下表格的加载问题。jsp的表格加载可以在控制层将数据封装在集合当中然后返回给jsp页面,通过jstl中的,<c:foreach>标签来进行循环遍历。而HTML5则需要在ajax中异步请求数据,然后通过遍历显示数据,二者最大的区别我个人认为在于jsp页面中<tboday >是有内容的,表格内容是加载在body内部的,而HTML5 表格内容则是空的<tbody>则是空的。所有内容都是在异步请求中加载的。我们来看例子。
jsp加载表格:
<div id="data" style="margin:0 auto;width: 95%">
<table cellspacing="0" cellpadding="0" style="width: 95%;border:solid #C7C7C7;border-width: 1px 0px 0px 1px;" >
<thead style="background-color:#48A9EB;color: white;font-size: 11px;">
<th style="width: 15%">排名</th>
<th style="width: 55%">企业名称</th>
<th style="width: 30%">全年用电总量(度)</th>
</thead>
<tbody>
<c:forEach items="${qyhdlist }" var="obj" varStatus="object">
<tr>
<td>${object.index+1 }</td>
<td>${obj.qymc }</td>
<td>${obj.qyhd }</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
所有的值都可以通过<c:forEach>标签来遍历得到。HTML5与之原理类似,但实现却有差异。表格内容:
<c:forEach>标签的使用可以参考之前的文章:
http://blog.csdn.net/abubu123/article/details/51691696
HTML5加载表格:
<div id="data" style="margin:0 auto;width: 95%">
<table id="table" cellspacing="0" cellpadding="0" style="width: 95%;border:solid #C7C7C7;border-width: 1px 0px 0px 1px;" >
<thead style="background-color:#48A9EB;color: white;font-size: 10px;">
<th style="width: 40%">社区名称</th>
<th style="width: 25%">上报事件数(件)</th>
<th style="width: 25%">办结事件数(件)</th>
<th style="width: 10%">排名</th>
</thead>
<tbody>
</tbody>
</table>
</div>
可以看到<today>是空的。然后通过ajax异步请求加载数据。这一点jsp也是可以实现的,但是jsp多数采用直接遍历。
$.ajax({
url : '/LeaderDeskBak/cityevent/findtodayTop10',
type : "POST",
dataType : "json",
contentType : "application/json,charset=utf-8",
//data:JSON.stringify({"page":1,"pageSize":10,"type":"东城要闻"}),
success : function(data) { //数据解析显示
$.each(data, function(i, data) { //循环解析,追加显示
$('#table').append(
<<tr><td style='border-left: 1px solid #dadada;border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align:center;font-size: 10px;'>"
+ (data.communityname) + "</td><td style='border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align:center;'>"
+ data.todaygetNum + "</td><td id='amxl' style='border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align:center;'>"
+ data.todayfinishNum+ "</td><td style='border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align:center;'>"
+ (i+1) + "</td></tr>");
})
},
});
请求后的表格数据:
小结:jsp和HTML5在页面布局上的基本类似。各有优缺点,推荐使用HTML5,因为HTML5有很多新的特性而且适用范围要比jsp广泛很多。只是个人短见而已。主要是记录HTML表格的遍历,以备后用。