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

登录大体有两种方法一个是表单提交另一个就是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");



        }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值