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

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":"错误信息"}。

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);
        }
    });
}

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