zoukankan      html  css  js  c++  java
  • 提交表单而不刷新页面

    用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清空。就是这样。本质上跟第一种是一样的。

  • 相关阅读:
    pkuwc2019自闭记
    一些多项式的整理
    Codeforces 1085G(1086E) Beautiful Matrix $dp$+树状数组
    Codeforces 1083C Max Mex 线段树
    Codeforces 1090J $kmp+hash+$二分
    Codeforces 1073G Yet Another LCP Problem $SA$+单调栈
    Codedforces 1076G Array Game 线段树
    LuoguP5017 摆渡车 $dp$
    NOIP2018游记
    解决python3 安装turtle的问题
  • 原文地址:https://www.cnblogs.com/JoiT/p/4825480.html
Copyright © 2011-2022 走看看