提交表单而不刷新页面

用Form+iFrame

<iframe id="if" class="fr" name="fr"></iframe>

<form target="fr" action="/Home/test">

    <input type="submit" class="submit" value="Start" onclick="return sub()"/>

</form>

 

<script>   

    //获取iframe对象

    var iframe = document.getElementById("if");

    var flag = 0;

    //JS绑定事件

    //el:表示选中的dom元素

    //type:事件名称

    //fn:事件处理器

    function addEvent(el, type, fn) {

        if (el.addEventListener) {

            //绝大多数非IE内核浏览器

            el.addEventListener(type, fn, false);

        } else if (el.attachEvent) {

            //IE内核

            el.attachEvent('on' + type, function () {

                fn.call(el);

            });

        } else {

            //选择dom元素错误

            throw new Error('不支持该dom元素');

        }

    }

    

    addEvent(iframe, 'load', function () {        

        if (flag != 0) {

            alert("执行完毕!");

            //事件这里处理完就把flag变成0

            flag = 0;

        }

    });

 

    function sub() {

        //如果flag为0,说明是刚进来没有请求过。

        //然后把它变成1

        //说明我已经在请求了

        //通知事件那边准备处理

        if (flag == 0) {

            flag = 1;

        }

        return true;

    }

</script>

关于标志位:

也可以利用服务器返回值来判断。事件处理器中,判断iframe中是否有服务器返回值,没有说明是刚进来,没有请求过。有的话就表示是因为请求而触发的onload事件。事件处理器处理完之后,再把iframe清空。就是这样。本质上跟第一种是一样的。

    原文作者:AlexZ33
    原文地址: https://segmentfault.com/a/1190000010297329
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞