不能不知道的JSP页面填充技巧

最近一直在做前台JSP页面，遇到了很多问题，也学到了很多东西。今天主要想谈一下页面填充的作用。笔者认为，页面填充主要由这些好处：1.实现级联 2.实现页面的局部刷新 3.动态加载。

今天主要就前两点做一些总结：级联的实现本就是局部刷新的，当选择一个下拉框后，受影响的下拉框将被重新加载；页面局部刷新用得较多的是查询页面，因为查询页面往往有很多个查询条件，如果我们查询后重新加载整个页面，所带来的结果就会是结果查出来了，查询条件的下拉框又被初始化。如图：

如果我们能做到仅仅重新加载查询的结果数据，就实现了我们想要的效果，如图：

    区别就是下拉框没有被初始化，实现了页面的局部刷新。

   那么，页面的局部刷新是如何做到的呢？笔者是用回调函数来实现的。上一篇博文中笔者分享了自己做级联的经验，现在就举一个简单的填充查询数据的例子。

这是我们通过查询要显示的页面部分代码：

<tr>

     <tdcolspan="8"id="courseMappingAjax">

        <tableborder="1">

           <c:forEachitems="${courseMappingVOList}"var="courseMapping">

           <tr>

               <tdwidth="100px"><inputtype="checkbox"name="selectFlag"  id="selectFlag"value="${courseMapping.id}"></td>

               <tdwidth="100px"><c:outvalue="${courseMapping.grade}"/></td>

               <tdwidth="100px"><c:out value="${courseMapping.eduLevelName}"/></td>

               <tdwidth="150px"><c:out value="${courseMapping.specialName}"/></td>

               <tdwidth="150px"><c:out  value="${courseMapping.courseName}"/></td>

               <tdwidth="150px"><c:out  value="${courseMapping.uniExamCourseName}"/></td>

               <tdwidth="150px"><c:out  value="${courseMapping.lastOprPeople}"/></td>

<tdwidth="150px"><fmt:formatDate value="${courseMapping.lastOprTime}"/></td>

          </tr>

        </c:forEach>

     </table>

  </td>

</tr>

    页面中执行查询操作会提交给JavaScript，将请求交给Controller处理，从后台取得查询数据后数据给了一个辅助的页面，命名为courseMappingAjax.jsp，其页面代码跟我们的查询页面显示查询数据的部分完全一样，这里就不贴出来了。主要谈谈用javaScript的回调函数的实现数据的填充。

   首先，页面提交按钮，调用searchCourseMapping()函数，该函数获得查询参数，并调用getCourseMapping()函数。在getCourseMapping()函数中设置回调函数，也就是说该函数是在发送post请求Controller处理并得到查询数据给了courseMappingAjax.jsp页面之后再执行。我们可以看到courseMapping()函数就是实现填充功能的，将courseMappingAjax.jsp页面中“id= courseMappingAjax”部分填充到查询页面中“id= courseMappingAjax”的部分。

   function searchCourseMapping() {

     var grade = document.getElementById("grade").value;

     var eduLevelId = document.getElementById("eduLevelId").value;

     var specialId = document.getElementById("specialId").value;

     var uniExamCourseId = document.getElementById("uniExamCourseId").value;   

     getCourseMapping(grade, eduLevelId, specialId, uniExamCourseId);

  }

  function getCourseMapping(grade, eduLevelId, specialId, uniExamCourseId) {   

     createXmlHttp();//创建XMLHttpRequest对象

     xmlHttp.onreadystatechange = courseMapping;//设置回调函数

     xmlHttp.open("POST","scoreManage_searchCourseMapping",true);//发送POST请求，执行查询操作。注意：该请求返回的视图是courseMappingAjax.jsp页面

     xmlHttp.setRequestHeader("Content-type",

           "application/x-www-form-urlencoded");

     xmlHttp.send("grade=" + grade +"&eduLevelId=" + eduLevelId

           +"&specialId=" + eduLevelId +"&uniExamCourseId="

           + uniExamCourseId);

  }

  function courseMapping() {

     if (xmlHttp.readyState == 4) {

        if (xmlHttp.status == 200) {

           //此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码         document.getElementById("courseMappingAjax").innerHTML = xmlHttp.responseText;

        }

     }

  }

这样，我们就实现了局部刷新页面。