本文介绍一种无需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);
}
});
}
这种方法实现起来相对简单,读者可以直接参考使用。