内嵌url 的 overlay 支持form 的ajax 提交，随意将普通网页变成overlay效果

最新推荐文章于 2024-04-30 13:26:40 发布

sharpwave

最新推荐文章于 2024-04-30 13:26:40 发布

阅读量130

点赞数

文章标签： Ajax Java JSP jQuery json ViewUI

本文链接：https://blog.csdn.net/sharpwave/article/details/83710046

版权

如果你有一个 form page 比如 form.jsp 通过 initHandler forward ，在不改或者很少改代码的前提下如何变成 overlay 效果呢？

具体效果请访问 [url]http://flowplayer.org/tools/demos/overlay/external.html[/url]

实现过程以简单demo 聚例

demo.jsp


<html>
<head>

<link rel="stylesheet" media="all" type="text/css"  href="<c:url value="/resource/css/jquery/ui/overlay-minimal.css"/>" /> 

 <script type="text/javascript" src="<c:url value="/resource/js/jquery/core/jquery-1.4.2.js"/>"></script>
<script src="<c:url value='/resource/js/jquery/customer/jquery.overlay.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/js/jquery/customer/jquery.myOverlay.js'/>"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/customer/jquery.form.js"/>"></script>


<script type="text/javascript">

$(function(){
	window.personalDoFunc=function(el){
	    	 $().myOverlay(el,function(record){
	             document.getElementById("mytest").innerHTML="返回的结果：name:"+record.name;
	         });
	};	
});

</script>

</head>
<body>
   <a href="/personEdu/84"  onclick="personalDoFunc(this)" >[Add]</a>
    <a href="/personEdu/edit_form/157"  onclick="personalDoFunc(this)">[Edit]</a>
    <div id="mytest">返回的结果：</div>
</body>
</html>

其中如果需要引用 overlay 需导入两个 ovelay js 一个css 和jquery core 并且如果需要form ajax submit 同时要引入 form.js


<link rel="stylesheet" media="all" type="text/css"  href="<c:url value="/resource/css/jquery/ui/overlay-minimal.css"/>" /> 

 <script type="text/javascript" src="<c:url value="/resource/js/jquery/core/jquery-1.4.2.js"/>"></script>
<script src="<c:url value='/resource/js/jquery/customer/jquery.overlay.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/js/jquery/customer/jquery.myOverlay.js'/>"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/customer/jquery.form.js"/>"></script>

如果你点击一个连接本来应该是连接到另一个页面如

<a href="/personEdu/84"  onclick="personalDoFunc(this)" >[Add]</a>

只要加上自己定义函数 personalDoFunc（名字任意）并且实现如下


<script type="text/javascript">

$(function(){
	window.personalDoFunc=function(el){
	    	 $().myOverlay(el,function(record){
	             document.getElementById("mytest").innerHTML="返回的结果：name:"+record.name;
	         });
	};	
});

</script>

在自定义函数中显示调用 $().myOverlay(el,callback)方法其中 el为当前 <a>对象第二个参数为回调函数参数record 就是后台返回的对象数据

如例子中我的url 指向personEdu/84 则后台接受如下


 @RequestMapping(value = "/{id}",method = RequestMethod.GET)   
    public String init(@PathVariable("id") Integer personId,Model model) {
        PersonEdu personEdu=new PersonEdu();
        personEdu.setPersonId(personId);
        model.addAttribute("personEdu", personEdu);
        return "edu/personEdu";   
    }

在不加 overlay情况下会跳转到一个 personEdu.jsp的页面如果加上就可把当前页面内嵌在overlay 的div中

personedu.jsp 中的片段代码


  <input type="submit" name="save2" value="保存form Submit" onclick="doSubmit(this)"/>
            <a overlay="{url:'/personEdu/overlay2'}"><input type="button" value="普通Ajax"  name="overlayUrl"/></a>

两种方法列举了 form submit 和普通的 ajax 如果普通的ajax 需要自定义 overlay属性以json格式
后台接受


 @RequestMapping(method = RequestMethod.POST)   
    @ResponseBody
    public  JsonData savePersonEdu(PersonEdu personEdu, Model model,HttpServletRequest request,HttpServletResponse response) throws JSONException {
        Integer i=personEdu.getId();
        if(i!=null&&i>0){
           // this.personEduService.updatePersonEdu(personEdu);
        }else{
           // i=this.personEduService.addPersonEdu(personEdu);
        }
        return new JsonData(personEdu);
    }

由于时间有限不明细处望见谅啊附件中有 overlay 源码以及效果图片

sharpwave

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内嵌url 的 overlay 支持form 的ajax 提交，随意将普通网页变成overlay效果

如果你有一个 form page 比如 form.jsp 通过 initHandler forward ，在不改或者很少改代码的前提下如何变成 overlay 效果呢？具体效果请访问 [url]http://flowplayer.org/tools/demos/overlay/external.html[/url]实现过程以简单demo 聚例demo.jsp...
复制链接

扫一扫