jspjava代码赋值 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;
        }
     }
  }

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