zoukankan      html  css  js  c++  java
  • 阻止form表单提交跳转转防丢

    我们在前端开发过程中,会经常把数据提交给后台,其中少不了需要form进行表单提交。但是碰到在form中提交会默认跳转到接口页面。
    我们新建一个demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <form action="http://localhost:8080/user">
            账号:<input type="text" name="name">
            <input type="submit" value="提交">
        </form>
    </body>
    </html>

    上面是一个最简单的demo,后台接口是自己用node服务器模拟的,会返回

    {
        code:'1',
        msg:'提交成功'
    }

    现在我们测试下:

    \

    发现点击提交后会自动跳转到接口地址,这可不是我们想要的结果。解决办法如下,修改上面的html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <form action="http://localhost:8080/user" target="stop">
            账号:<input type="text" name="name">
            <input type="submit" value="提交">
        </form>
        <iframe  name="stop" style="display:none;"></iframe>  
    
    </body>
    </html>
    

    我们建一个隐藏的iframe,增加name属性,这里用stop为例,然后在form上增加target属性,值和iframe的name值相等。现在再测试下,发现成功阻止。

     


    作者:YINdevelop
    链接:https://www.jianshu.com/p/6e1ef82bc616
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    技术交流qq群:143280841
  • 相关阅读:
    python函数续
    模拟数据库查询操作
    文件处理
    字符编码
    python函数
    ACM-ICPC 2018 南京赛区网络预赛Skr
    bzoj3676: [Apio2014]回文串 pam
    Wannafly挑战赛23B游戏
    bzoj4804: 欧拉心算 欧拉筛
    bzoj3884: 上帝与集合的正确用法 扩展欧拉定理
  • 原文地址:https://www.cnblogs.com/zuochanzi/p/15749495.html
Copyright © 2011-2022 走看看