利用隐藏iframe实现无刷新表单提交

作者:工具松鼠

时间:2026-10-28

浏览:70

本文介绍一种无需AJAX即可实现表单无刷新提交的技术方案。通过创建一个隐藏的iframe元素,将表单的target指向该iframe,利用iframe的load事件监听后台返回的JSON数据。前端解析返回结果后,根据成功或失败状态执行相应的页面刷新或错误提示操作,从而避免页面整体刷新。

文章目录

HTML结构配置

HTML代码部分如下:

具体实现代码如下:

<iframe id="fra" name="frm" style="display: none;"></iframe>
<form id="frm" method="post" action="@Url.Content("~/Backstage/MachineMng/RoadSet/SaveTrackRoad")?roadId=@ViewBag.roadId" target="frm">
此处放置具体的表单内容
</form>

JavaScript逻辑处理

接下来是JavaScript代码部分:

当保存操作成功时,后台接口应返回格式为{"ok":true}的JSON数据;若保存失败,则返回{"ok":false, "msg":"错误信息"}。

相关JS代码示例如下:

function save() {
$("#frm").submit();
$("#fra").one("load", function () {
var data = eval("(" + $("#fra").contents().find("body").html() + ")");
if (data.ok) {
$("#divtrackroad").load("TrackRoad?roadId=" + '@ViewBag.roadId' + "&roadName=" + '@ViewBag.roadName' + "&viewOrEdit=1&t=" + new Date().valueOf());
} else {
alert("保存失败:" + data.msg);
        }
    });
}

这种方法实现起来相对简单,读者可以直接参考使用。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章