不使用ajax实现无刷新提交表单

165 阅读 0 评论 109 点赞

我是靠谱客的博主光亮刺猬，最近开发中收集的这篇文章主要介绍不使用ajax实现无刷新提交表单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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>

JS代码：

若保存成功，后台返回{"ok":true}；若保存失败，后台返回{"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);

        }

    });

}

是不是很简单呢，小伙伴们需要的话，直接拿走，不用客气^_^