利用spring mvc,hibernate重构系统（3）

本章节继续讲解如何使用spring mvc和Iframe进行类似ajax的数据提交页面无刷新的效果！！

父页面的功能如下：增删改功能，关键代码如下

<script type="text/javascript">
//Action 操作对象 拥有 add query del 等方法
var Action = {};
//查询
Action.qry = function()
{
document.forms[0].target = "resultIframe";
 document.forms[0].action="list.jsp";
document.forms[0].submit();
};

Action.del = function()
{
document.forms[0].target = "delPage";
document.forms[0].action="/del/delRecord.mvc";
document.forms[0].submit();
};

//删除操作完成后的提示
window.actionComplete = function()
{
alert("操作完成！");Action.qry ();
};

</script>

<form action="list.jsp" name="QryForm" method="post" target="resultIframe">



<input name="Sreach" type="button"
         class="Sreach" onClick="Action.qry();" value="查找" /> 



<input type="button" class="btn_4" value="删除"
         onClick="Action.del()" /> 

</form>

<iframe name="resultIframe" style="width:100px;height:100px"/><!-- 查询结果页面-->

<iframe name="delPage" style="display:none;"/><!--  删除结果页面-->

list.jsp 代码如下：

<html> <body>我是列表页面</body></html>

DelController 代码如下：

@Controller
@JspPkg(value="/")
public class DelController  extends BaseActionController {
 @Resource(name = "jdbcTemplate")
 private JdbcTemplate jdbcTemplate;

 public ModelAndView delRecord(HttpServletRequest request,
   HttpServletResponse response) throws Exception {
  

  String sql = "DELETE FROM TEST WHERE a = 1 ";
   jdbcTemplate.update(sql ,new ArrayList()); 



   return this.getResultPage();//--指向 resultPage.jsp页面
 }



}

resultPage.jsp

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>结果处理页面</title>
<%
 String function = RequestUtil.getParameter(request,"function","actionComplete");
%>
<script type="text/javascript">

// 添加 || 修改完成
window.initBody = function()
{
 var result = new Object();
 result.key =  '${key}'; 
 result.status =  '${status}'; 
 result.message = '${prompt}';
 result.prompt  = '${prompt}';
 result.level = 0;
 result.display = true;
 window.exist = false;
 try{
  window.parent.<%=function%>(result);
 }catch(E){
  window.alert("函数未找到 : function2=[<%=function%>]");
 }
 
};

</script>
</head>
<body onload="initBody();">
结果页面
</body>
</html>

上面就是所有代码，很简单的逻辑，但里面的原理很有用。

上面代码执行的原理大体如下：

查询时，表单把数据提交到resultIframe这个iframe中，利用这个Iframe来展现列表信息；、

删除操作时，表单提交数据到delPage这个隐藏的Iframe中，删除的处理逻辑在DelController 中，最后DelController 将处理结果转向resultPage.jsp页面；这时delPage 中的内容便是resultPage.jsp中的内容；、

resultPage.jsp只做了一件事：页面加载完成后，执行父页面的actionComplete方法；这样父页面就在没有刷新的情况下完成了删除操作

利用spring mvc,hibernate重构系统（3）

猜你喜欢