背景：最近发现自己的前台真的不怎么样，样式的调整还可以，但是对于前后台传值还有循环真的是不怎么滴，不熟练甚至是不会，对于不熟练的东西，说明你上升的空间很大，好好学习哦。
一、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>
controller
@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，梳理自己的知识。
