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

小灰灰 2022-05-10 02:04 128阅读 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");
    
    
    
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery ajax 实现表单提交和验证表单

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert t

矫情吗；*/ 2024年02月19日 13:25/ 0 赞/ 68 阅读

相关提交表单时，进行ajax验证

提交表单时，先进行ajax验证，根据验证结果判断是否提交表单。这时的ajax验证必须是同步的，才能保证先验证后提交表单。代码如下： function c

朴灿烈づ我的快乐病毒、/ 2023年06月30日 09:06/ 0 赞/ 28 阅读

相关 jquery.form.js 使用ajax方式提交表单

引入jquery文件 <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

àì夳堔傛蜴生んèń/ 2022年12月07日 15:08/ 0 赞/ 226 阅读

相关 java web 表单提交_JavaWeb学习日记----表单提交方式

1.表单提交方式 (1) 使用input控件中的submit提交代码如下： Title用户：密码：结果： ![b7adcc2965a8bbbfc71ccb4

客官°小女子只卖身不卖艺/ 2022年11月02日 11:56/ 0 赞/ 335 阅读

相关用户登录邮箱检测表单提交

写的用户登录邮箱检测。只做了前端~ onblur失去焦点事件，66666原来可以用来检测输入的格式是否合格，然后输入完，文本框失去焦点。然后 οnblur=”函数名”

柔情只为你懂/ 2022年09月26日 02:56/ 0 赞/ 164 阅读

相关 ajax提交表单

ajax提交表单在项目中常用，前台无论是简单的html、jsp或者是使用了easyui框架，提交表单都会使用到ajax，extjs框架其实也是使用了ajax只不过对其进

我就是我/ 2022年08月13日 00:56/ 0 赞/ 280 阅读

相关表单提交验证

其中几个知识点 1、angularJs提供了几个新的type类型： ![复制代码][copycode.gif] type="password"

Dear 丶/ 2022年06月05日 04:24/ 0 赞/ 328 阅读

相关用Ajax方式提交form表单

用Ajax方式提交form表单一、写一个表单 <table> <tbody> <tr> <td style="width:14px;"> <p>

深碍√TFBOYSˉ_/ 2022年05月17日 13:23/ 0 赞/ 301 阅读

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

登录大体有两种方法一个是表单提交另一个就是ajax提交 1.表单提交表单提交如果前端JS没有验证十分简单，不详述。 JS验证用户名、密码是否为空其

小灰灰/ 2022年05月10日 02:04/ 0 赞/ 129 阅读

相关 JS 验证表单 JS提交验证类(转)

附加：js验证radio是否选择 <script language="javascript"> function checkform(obj) \{ for(i

待我称王封你为后i/ 2022年02月22日 00:59/ 0 赞/ 310 阅读