当前位置: 代码迷 >> Web前端 >> 不可不知道的页面填充技巧
  详细解决方案

不可不知道的页面填充技巧

热度:466   发布时间:2012-11-26 11:48:49.0
不能不知道的页面填充技巧

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

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

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

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

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

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

<tr>

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

        <tableborder="1">

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

           <tr>

               <td width="100px"><input type="checkbox"name="selectFlag"  id="selectFlag" value="${courseMapping.id}"></td>

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

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

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

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

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

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

<td width="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;

        }

     }

  }

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

 

  相关解决方案