码迷,mamicode.com
首页 > 其他好文 > 详细

关于提交form不刷新的问题

时间:2015-07-02 17:09:00      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

最近在做一个项目,除去主页面是html页面,点击菜单按钮都由ajax加载生成,在这种情景下,F5刷新或者提交form表单就会将页面回复到刚刚打开主页面。

现在有一个这样的场景,点击子菜单生成一个子页面,在子页面有一个添加按钮,如图:

技术分享

在点击添加按钮后会出现一个模态框,将信息录入,如图:

技术分享

如果直接使用form表单提交那么就会将整个页面刷新,与预想的结果不符,于是在网上找到了设置form的target方法,在这个模态框中设置一个不可见的iframe。

<form id="upLoadApp" action="XXX" target="id_iframe" enctype="multipart/form-data" method="post">
</form>
<iframe id="id_iframe" name="id_iframe" style="display: none;">
</iframe> 

但是这样的话,提交到iframe就无法获取表单回显的数据进行下一步的操作了,于是想起来action跳转后相当于重新加载一次页面,于是就在iframe的onload属性加入以下方法,

获取 iframe中的数据方法是: window.frames[‘id_iframe‘].document.getElementsByTagName(‘pre‘)[0].innerHTML

<form id="upLoadApp" action="XXX" target="id_iframe" enctype="multipart/form-data" method="post">
</form>
<iframe id="id_iframe" name="id_iframe" style="display: none;" onload="var data = JSON.parse(window.frames[‘id_iframe‘].document.getElementsByTagName(‘pre‘)[0].innerHTML);if(data.returnCode == 0){dialog.destroy();myCommonDT.ajax.reload();}else{alert(data.returnMessage);}">
</iframe> 

这样在表单提交到iframe后就可以执行onload方法从而获取到返回的json数据

但是这样做的话第一次加载时页面会发出警告,如图

技术分享

 

关于提交form不刷新的问题

标签:

原文地址:http://www.cnblogs.com/Yiran583/p/4616414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!