前端 js 实现简单 表单提交

Posted Terre

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端 js 实现简单 表单提交相关的知识,希望对你有一定的参考价值。

1. 登录页 验证用户身份,登录成功之后等待一定秒数,跳转到操作页面

<html> 
  <head> 
    <title>Login.html</title> 
     
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
    <script type="text/javascript"> 
      function checkuser() { 
         if($(uname == "lala") && $(pwd) == "123") { 
           return true; 
         }else { 
            return false; 
         } 
      } 
       
      function $(id) { 
        return document.getElementById(id).value; 
      } 
     </script> 
  </head> 
   
  <body> 
    <form action="ok.html"> 
      u:<input type="text" id="uname"/><br> 
      p:<input type="password" id="pwd"/><br> 
      <input type="submit" value="登录" onclick="return checkuser()"/> 
    </form> 
  </body> 
</html> 

2. 登录成功页面中,等待5秒

<html> 
  <head> 
    <title>ok.html</title> 
     
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
    <script type="text/javascript"> 
        function tiao() { 
          clearInterval(mytime); 
          window.open("manage.html","_self"); 
        } 
         
        setTimeout("tiao()",5000); 
         
        function changeSec() { 
           //得到myspan值 
           $(myspan).innerText=$(myspan).innerText-1; 
        } 
         
         function $(id) { 
        return document.getElementById(id); 
      } 
        var mytime = setInterval("changeSec()",1000); 
    </script> 
  </head> 
   
  <body> 
    登录成功,<span id="myspan">5</span>秒后自动跳转到管理页面 
  </body> 
</html> 

3. 写一个manage.html 即可

以上是关于前端 js 实现简单 表单提交的主要内容,如果未能解决你的问题,请参考以下文章

Ajax 提交表单包括文件上传

HTML 表单提交 的简单代码

token防止前端重复提交

js模拟点击事件实现代码

js阻止form表单重复提交

vue.js中 ,回车键实现登录或者提交表单!