云中烛火

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
frame表单target的用法

form表单的target，当将iframe设置为隐藏时，可以实现当前页表单提交而不进行跳转刷新。

准备两个页面：

　　第一个页面：此页面用于提交表单，form表单的name属性要和iframe的name属性一致

　　　test2.jsp　

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 </head>
 9 <body>
10 <form action="usr/testIframe" method="post" target="iframesw">
11     <input type="submit" value="提交"/>
12     <iframe name="iframesw" id="hiddenIframe" style="display:none">
13     
14     </iframe>
15 </form>
16 <script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
17 <script type="text/javascript">
18 
19 function hiddenIframe(name){
20     alert(name);
21 }
22 </script>
23 </body>
24 </html>

 

contorller:

　　

　　@At("/testIframe")
    @Ok("jsp:okJsp")
    public void testIframe(HttpServletRequest request){
        request.setAttribute("name", "zhangsan");
    }

第二个页面：controller返回的页面，此contorller返回的结果在target指定的iframe里执行，而iframe已经隐藏了。这样提交后的效果就和无刷新的效果一样。

okJsp.jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 </head>
 9 <body>
10 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
11 <script type="text/javascript">
12     $(function(){
13         parent.hiddenIframe('${name}');
14     })
15 </script>
16 </body>
17 </html>

 

效果图：

 

posted on 2015-01-09 23:34  云中烛火  阅读(779)  评论(0)    收藏  举报