使用ajax+html来完成登录功能

最新推荐文章于 2024-04-07 09:44:00 发布

努力成为大佬的小垃圾

最新推荐文章于 2024-04-07 09:44:00 发布

阅读量2.7k

点赞数 2

文章标签： ajax html 前端后端

本文链接：https://blog.csdn.net/ssbviv/article/details/122150430

版权

一、引言

本文使用ajax+html来完成登录功能，本文已将源代码放到了码云上，有需要的可以自行查看。注册功能在这儿—>https://blog.csdn.net/ssbviv/article/details/122168322
如果下边代码出现粘贴问题或者其他问题可以来码云看全部的代码。
网址：https://gitee.com/rabbit-a/learning-summary.git
先放代码后说明

二、正文

首先展示登录页面，之后是登录功能的后台代码和前台代码，前台代码单独放到了一个js文件里，最后再引入到页面里。

登录页面展示

登录代码（前台）

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>用户登录</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!--引入js文件-->
    <script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div class="container" style="width: 400px;">
    <h3 style="text-align: center;">用户登录</h3>
    <form action="LoginServlet" method="post" id="loginForm">
        <div class="form-group">
            <label for="user">用户名：</label>
            <input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
        </div>

        <div class="form-inline">
            <label for="vcode">验证码：</label>
            <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
            <a href="javascript:refreshCode();">
                <img src="CheckCodeServlet" title="看不清点击刷新" id="vcode"/></a>
        </div>
        <hr/>
        <div class="form-group" style="text-align: center;">
            <input class="btn btn btn-primary" id="btn_sub" type="button" value="登录">
        </div>
    </form>

    <!-- 出错显示的信息框 -->
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" >
            <span>&times;</span></button>
        <strong id="errorMsg"></strong>
    </div>
</div>
</body>
</html>

登录代码（后台）

package com.myself.test.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.myself.test.domain.ResultInfo;
import com.myself.test.domain.User;
import com.myself.test.service.UserService;
import com.myself.test.service.impl.UserServiceImpl;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet(name = "LoginServlet", value = "/LoginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        //1.获取用户名和密码
        Map<String, String[]> map = request.getParameterMap();
        //2.封装user对象
        User user = new User();
        try {
            BeanUtils.populate(user,map);//用BeanUtils工具类封装，注意不要导错了包，是org.apache.commons.beanutils.BeanUtils;
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //3.调用service查询
        HttpSession session = request.getSession();
        UserService service = new UserServiceImpl();
        ResultInfo info = new ResultInfo();//给出提示信息，这里用方法封装了一下,方便使用
        User loginUser = service.login(user);
        //4.判断用户登录是否成功
        if(user!=null){
            //登录成功
            //存储用户，做个24小时免登录
            Cookie cookie = new Cookie("JSESSIONID", session.getId());
            cookie.setMaxAge(60*60*24);
            response.addCookie(cookie);
            session.setAttribute("user",loginUser);//登录成功标记
            info.setFlag(true);
        }else{
            //如果用户登录失败，给出提示信息
            info.setErrorMsg("用户名或者密码错误");
            info.setFlag(false);
        }

        //响应数据
        response.setContentType("application/json;charset=utf-8");
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getOutputStream(),info);

    }
}

登录代码（js代码）

$(function (){
    //给登录按钮绑定单击事件
    $("#btn_sub").click(function (){
        //2.发送ajax请求，提交表单数据
        $.post("LoginServlet",$("#loginForm").serialize(),function (data){
            //data: {flag :false,errorMsg:''}
            if(data.flag){
                //登录成功
                location.href="success.html";
            }else {
                //登录失败
                $("#errorMsg").html(data.errorMsg);
            }
        });
    });
});
//切换验证码
function refreshCode(){
    //1.获取验证码图片对象
    var vcode = document.getElementById("vcode");
    //2.设置其src属性，加时间戳
    vcode.src="${pageContext.request.contextPath}/CheckCodeServlet?time="+new Date().getTime();
}

下边是引入上边那个js代码

<!--引入js文件-->
    <script type="text/javascript" src="js/login.js"></script>

三、说明

登录功能首先是先通过点击登录按钮之后触发js事件，发送ajsx请求，提交表单数据，这里要注意的是我们是用js代码写的，所以提交按钮类型必须是button
可以参考wscschool的参考书的input标签里的type属性，下边已经给大家找到了，在这里插入图片描述
其次，我们先获取了用户名和密码，之后把他们用工具类进行了封装，然后调用service里的login的方法，里面通过调用dao里的findUsernameAndPassword方法，查找用户名和密码，登录成功我们做了个24小时免登录的功能，不管登录成功与否，我们都把提示信息做了一个封装，就是ResultInfo，最后响应数据，这里用到了jackson解析器。
$("#loginForm").serialize()是序列表表格内容为字符串。不懂的可以查文档。后边是一个方法用于判断是否登录成功，成功就跳转页面，不成功就给出错误信息。