关于提交form不刷新的问题

最近在做一个项目，除去主页面是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数据

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

 

转载于:https://www.cnblogs.com/Yiran583/p/4616414.html