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
  • 相关阅读:
    1020. Tree Traversals
    1001. A+B Format
    centos 各类无线网卡编译
    vim 详细配置 超全
    深夜复习strcpy函数原型竟然暗藏着这么多玄机
    第一篇博客
    strcat函数使用中出现的问题
    strcpy与strncpy工作方式及其区别
    strcpy与面试官
    linux下多线程编程
  • 原文地址:https://www.cnblogs.com/zuochanzi/p/15749495.html
Copyright © 2011-2022 走看看