HTML5与jsp差异小谈。【表格加载】

随着HTML5技术的逐渐成熟，越来越多的被大家使用。 今天就遇到了一个 HTML5的例子，发现与往日的jsp页面相似，但也有很多区别，所以记录下来，以备后用。

HTML5 所到底还是个HTML页面，不像jsp可以直接写java代码，或者是使用JSTL标签引入jar包。首先看一下二者在此的区别吧。

jsp引入jar包：

可以看到jsp 导入js文件或者jar包是可以使用java代码获取当前文件路径的。

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表格的遍历，以备后用。