总结之Web两种用户登录方式及JS信息验证操作——表单提交、ajax提交

最新推荐文章于 2024-08-25 13:52:49 发布

IManiy

最新推荐文章于 2024-08-25 13:52:49 发布

阅读量3.1k

点赞数

分类专栏： java及javaweb 文章标签： javaweb

本文链接：https://blog.csdn.net/IManiy/article/details/82830710

版权

java及javaweb 专栏收录该内容

86 篇文章 0 订阅

订阅专栏

登录大体有两种方法一个是表单提交另一个就是ajax提交

1.表单提交

表单提交如果前端JS没有验证十分简单，不详述。

JS验证用户名、密码是否为空
其中非submit和button按钮

submit有一些注意事项

form中要οnsubmit=“return login()” 其中“return”一定要写
return false;//因为这是submit表单提交返回false 不进行请求其中“false”要写 button可以不用。

<script src="login/vendor/jquery/jquery-3.2.1.min.js"></script>
  <script>
      function login() {
          var username=$("#username").val();
          if (username==""){
              alert("用户名不能为空！");
              return false;//因为这是submit表单提交 返回false 不进行请求
          };
          var password=$("#password").val();
          if (password==""){
              alert("密码不能为空！");
              return false;
          }
      }
  </script>
  <body>
  <form action="loginFrom" method="post" onsubmit="return login()">
  账户：<input id="username" type="text">
  密码：<input id="password" type="password">
  <input type="submit" value="提交">
  </form>

Button提交

  <script src="login/vendor/jquery/jquery-3.2.1.min.js"></script>
  <script>
      function login() {
          var username=$("#username").val();
          if (username==""){
              alert("用户名不能为空！");
              return;
          };
          var password=$("#password").val();
          if (password==""){
              alert("密码不能为空！");
              return;
          }
          $("#loginFrom").submit();       
      }
  </script>
  <body>
  <form action="loginFrom" method="post" id="loginFrom">
  账户：<input id="username" name="username"  type="text">
  密码：<input id="password" name="password" type="password">
  <input type="button" value="提交" onclick="login()">
  </form>

2.ajax提交

 <script src="login/vendor/jquery/jquery-3.2.1.min.js"></script>
  <script>
      function login() {
          var username=$("#username").val();
          if (username==""){
              alert("用户名不能为空！");
              return;
          };
          var password=$("#password").val();
          if (password==""){
              alert("密码不能为空！");
              return;
          }
          //$("#loginFrom").submit();
          $.post("loginFrom",{username:username,password:password},function (data) {
              if(data=="1"){
                  //跳转到成功页面
                  location.href ="successPage.jsp";
              }else{
                  alert("用户名或者密码不正确!");
              }
          });
      }
  </script>
  <body>

  账户：<input id="username" name="username"  type="text">
  密码：<input id="password" name="password" type="password">
  <input type="button" value="提交" onclick="login()">

Servlet

   String username =request.getParameter("username");
       String password =request.getParameter("password");
       username =new String(username.getBytes("iso-8859-1"),"UTF-8");
       password =new String(password.getBytes("iso-8859-1"),"UTF-8");

        UserService userService=new UserServiceImpl();
        User user =userService.getUserByUsernameAndPassword(username,password);
        if(user!=null){
            System.out.println("登录成功");
            //session作用域，一次会话有效
            HttpSession session=request.getSession();
            session.setAttribute("user",user);
            String code ="1";
            response.getWriter().write(code);
            //response.sendRedirect("success.html");
        }else {
            System.out.println("登录失败");
            String code ="0";
            response.getWriter().write(code);
            //response.sendRedirect("fail.html");



        }