非异步form表单提交成功、失败弹窗提示,实现表单页面不刷新(模仿异步)

浏览:3594 发布日期:2017/11/04 分类:技术分享 关键字: form表单提交不刷新 form表单提交弹窗
我今天老板提了个需求,form表达提交成功或者失败都不要跳转,弹窗提示就好了,一想到到处要改成异步就蛋疼,在网上到处找,都没有找到合适的,然后我花了将近四个小时研究,终于总结出了实现方法,实现非常简单,相信很多朋友们都需要,我心情好,就仔细的将实现过程写出来分享给大家,学一下雷锋做一下好事,废话少说,进入正题。k看不懂可以加我qq:714142307

原里
1、利用iframe不刷新的提交form表单,注意!!不是ajax异步提交
2、在自定义success、error跳转的页面中获取提示信息传到父级表单页面的js上接收

实现过程

在全局都都调用到的html公共地方放个隐藏的iframe标签(form表单页面也可以)       <!-- 让表单提交不刷新,模拟异步体验 -->
    <div id="alert_message" style="display:none">
        <iframe name=iframe_form id="ifr" scrolling="no"></iframe>
    </div>
在全局都都调用到的html公共地方放个js函数,专门接收提示信息、弹窗、跳转的工作       //接收ifram页面返回的消息
        function iframe_form_msg(code, msg, url = ''){
                //这里简单弹窗,想要其他效果可以用其他插件弹窗
            alert(msg)             
            if(code == 1){
                setTimeout(function(){
                    location.href = url;
                }, 1000);
            }       
        }
在自定义success、error跳转的页面中加入执行父级js函数的代码                if(typeof(parent.iframe_form_msg) == 'function'){
                parent.iframe_form_msg("{$code}", "<?php echo(strip_tags($msg));?>", '{$url}');
                return false;
            }
最终:在需要操作的form表单上加个target="iframe_form"属性就可以了,注意!!这个属性的值要对应上面的iframe的name值




以上就是那么简单,应该能解决你们的男题了,不懂的记得q我714142307,我很乐意解说...................嘎嘎
最佳答案
评论( 相关
后面还有条评论,点击查看>>