背景：最近发现自己的前台真的不怎么样，样式的调整还可以，但是对于前后台传值还有循环真的是不怎么滴，不熟练甚至是不会，对于不熟练的东西，说明你上升的空间很大，好好学习哦。
一、Tap页显示表格
jsp
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<body>
<ul class="nav nav-tabs">
<li id="tab3" class="active"><a href="${ctx}/sys/uploadPictorial/manuscriptList">手稿列表</a></li>
</ul>
<table id="manuscripTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>题目</th>
<th>作者</th>
<th>起始页</th>
<th>结束页</th>
<th>密级</th>
<th>操作</th>
</thead>
<tbody>
<c:forEach items="${manuscriptList}" var="manuscriptList">
<tr>
<td>${manuscriptList.title}</td>
<td>${manuscriptList.author}</td>
<td>${manuscriptList.pgStart}</td>
<td>${manuscriptList.pgStop}</td>
<td>${manuscriptList.securityLevel}</td>
<c:choose>
<c:when test="${manuscriptList.securityLevel=='First'}">
<td>等级一</td>
</c:when>
<c:when test="${manuscriptList.securityLevel=='Second'}">
<td>等级二</td>
</c:when>
<c:when test="${manuscriptList.securityLevel=='Third'}">
<td>等级三</td>
</c:when>
<c:when test="${manuscriptList.securityLevel=='Fourth'}">
<td>等级四</td>
</c:when>
</c:choose>
<td>
<a href="${ctx}/sys/uploadPictorial/manuscriptList?id=${pictorialList.id}">查看</a>
<a href="${ctx}/sys/uploadPictorial/manuscriptList?id=${pictorialList.id}">编辑</a>
<a href="${ctx}/sys/uploadPictorial/deleteManuscrip?id=${manuscriptList.id}">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
controller
@RequestMapping(value = "manuscriptList")
public String manuscriptList(HttpServletRequest request,HttpServletResponse response,ManuscriptInfo manuscriptInfo, Model model) {
String pictorialId=request.getParameter("pictorialId");
model.addAttribute("manuscriptList", manuscriptService.findListByPictorialId(pictorialId));
return "mimp/sys/uploadPictorial/manuscriptList";
}二、使用Ajax动态拼接表格
JSP
function RefreshForm(){
var pictorialId = '5099df0397134edaabe6e5c1e48e2194';
var pgStart = '66';
$.ajax({
//提交数据的类型 POST GET
type:"POST",
//async:false,
//提交的网址
url:"${ctx}/sys/uploadPictorial/manuscriptSubList",
data:{"pictorialId":pictorialId,"pgStart":pgStart},
//返回数据的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//成功返回之后调用的函数
success: function(data){
var strHtml="";
for(var i=0;i<data.length;i++){
if(data[i].title.length>18){
strHtml+="<tr><td>"+"<lable title=\""+data[i].title+"\">"+data[i].title.substring(0,17)+"</lable>....</td><td><a id=\""+data[i].id+"\" οnclick=\"ShowForm(this.id)\">编辑</a>"+
"<a href=\"${ctx}/sys/uploadPictorial/deleteManuscrip?id=${manuscriptList.id}\">删除</a></td></tr>";
}else{
strHtml+="<tr><td>"+"<lable title=\""+data[i].title+"\">"+data[i].title+"</lable></td><td><a id=\""+data[i].id+"\" οnclick=\"ShowForm(this.id)\">编辑</a>"+
"<a href=\"${ctx}/sys/uploadPictorial/deleteManuscrip?id=${manuscriptList.id}\">删除</a></td></tr>";
}
}
document.getElementById("manSubList").innerHTML=strHtml;
},
//调用出错执行的函数
error:function(){
alert("刷新失败！");
}
});
} <!-- 加载列表 -->
<form id="subListForm" modelAttribute="manuscriptSubList" method="post" style="height:590px;" class="form-horizontal">
<div style="width:400px;height:94%;float:right;border:20px solid #484848;overflow-y:scroll;">
<table id="manuscriptTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>题目</th>
<th>操作</th>
</tr>
</thead>
<tbody id="manSubList">
</tbody>
</table>
</div>
</form> <!-- 列表页面按钮 -->
<div id="listBtns" style="float:right;margin-right:15%">
<input id="btnRefresh" class="btn btn-primary" value="刷新" type="button" οnclick="RefreshForm()"/>
</div>
@ResponseBody
@RequestMapping(value = "manuscriptSubList")
public List<ManuscriptInfo> manuscriptSubList(@RequestParam Map<String,String> params,HttpServletRequest request,HttpServletResponse response,ManuscriptInfo manuscriptInfo, Model model) {
//获得id
String pictorialId=request.getParameter("pictorialId");
//获取当前的页数
int pgStart=Integer.parseInt(request.getParameter("pgStart"));
List<ManuscriptInfo> manuscriptSubList = manuscriptService.findSubListByStartNum(pictorialId,pgStart);
return manuscriptSubList;
}三、学习心得
1、多多学习，多多总结，你会发现，自己会的东西越来越多
2、前后台传值在开发中十分重要，好好学习
3、总结在项目中的小tips，梳理自己的知识。
