本文介绍如何通过添加隐藏的iframe元素，利用其name属性作为表单target，实现表单数据提交时当前页面不刷新、不跳转的效果。适用于需要保持页面状态的传统表单场景，提供JS与jQuery两种设置target的方法。
表单提交不刷新页面的实现原理
如何实现表单提交后不重新刷新当前页面
<form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post'>
<input type="button" id="btnSubmit" name="btnSubmit" value="保存" onclick="addKp()" class="Button2" />
<input type="button" id="btnSubmit" name="btnSubmit" value="下一步" onclick="doAddCwKpSubmit()" class="Button2" />
</form>
当用户点击保存按钮提交FORM表单时，如何确保当前页面保持现状，即不触发页面的重新加载或刷新？
添加隐藏iframe元素
一种常见的解决方案是在FORM表单之后添加一个隐藏的iframe元素。
<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
设置表单target属性
在点击保存提交的JavaScript事件处理函数中，需要将表单的target属性修改为该iframe元素的name属性值。
JS:document.forms[0].target="rfFrame";
JQuery:$("#f2").attr("target","rfFrame");
通过这种方式，表单数据成功提交并保存，但当前页面不会发生跳转或刷新。
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持本站！