ajax 提交数据(案例：全 HTML 的登录退出系统，index.html，login.html，loginServlet)

最新推荐文章于 2023-04-05 21:25:41 发布

faramita_of_mine

最新推荐文章于 2023-04-05 21:25:41 发布

阅读量870

点赞数

分类专栏： Jsp与Servlet 文章标签： ajax html

本文链接：https://blog.csdn.net/faramita_of_mine/article/details/121756084

版权

Jsp与Servlet 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

全 HTML 的登录退出系统

一、创建步骤
二、核心代码
三、系统测试结果
- - ①密码错误登录结果截图
  - ②账号密码输入正确测试结果

一、创建步骤

步骤具体请参考链接
在这里插入图片描述

二、核心代码

①index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<h1>欢迎<span id="user"></span>登录！</h1>
<a href="logout">退出登录</a>
<script>
    $.post("userInfo",{},function (response) {
       $("#user").html(response)
    })
</script>
</body>
</html>

②login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form>
    <input name="name" , id="name">
    <input name="password" , id="password">
    <br>
    <br>
    <input type="button" value="登录" onclick="s()">
    <p style="color: red" id="message"></p>
</form>
<script>
    function s() {
        let name = $("#name").val();
        let password = $("#password").val();
        $.post("login", {name, password}, function (response) {
            if (response.trim() == '登录成功') {
                location.href = "index.html";
            } else {
                $("#message").html(response);
            }
        })
    }
</script>
</body>
</html>

③LoginServlet

package com.allen.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        request.setCharacterEncoding("UTF-8");
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        if ("admin".equals(name) && "123456".equals(password)) {
            request.getSession().setAttribute("userInfo",name);
            response.getWriter().println("登录成功");
        }else{
            response.getWriter().println("账号或密码错误！！！");
        }
    }
}

④LogoutServlet

package com.allen.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getSession().invalidate();
        response.sendRedirect("login.html");
    }
}

⑤UserInfoServlet

package com.allen.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/userInfo")
public class UserInfoServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        response.getWriter().println(request.getSession().getAttribute("userInfo"));
    }
}

⑥LoginFilter

package com.allen.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter("/*")
public class LoginFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request= (HttpServletRequest) servletRequest;
        HttpServletResponse response= (HttpServletResponse) servletResponse;
        if (request.getRequestURI().contains("login")) {
            filterChain.doFilter(request,response);
            return;
        }
        if (request.getSession().getAttribute("userInfo")!=null) {
            filterChain.doFilter(request,response);
            return;
        }
        response.sendRedirect("login.html");
    }
    @Override
    public void destroy() {
    }
}

三、系统测试结果

①密码错误登录结果截图

在这里插入图片描述

②账号密码输入正确测试结果

在这里插入图片描述

faramita_of_mine

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax 提交数据(案例：全 HTML 的登录退出系统，index.html，login.html，loginServlet)

全 HTML 的登录退出系统一、创建步骤二、核心代码①index.html②login.html③LoginServlet④LogoutServlet⑤UserInfoServlet⑥LoginFilter三、系统测试结果①密码错误登录结果截图②账号密码输入正确测试结果一、创建步骤步骤具体请参考链接二、核心代码①index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
复制链接

扫一扫