AJAX 登录与删除

最新推荐文章于 2023-06-07 17:26:18 发布

普通还不自信的程序员

最新推荐文章于 2023-06-07 17:26:18 发布

阅读量215

点赞数

分类专栏：代码

本文链接：https://blog.csdn.net/qq_41841482/article/details/107920492

版权

代码专栏收录该内容

94 篇文章 6 订阅

订阅专栏

通过ajax在登录、删除时弹出提示框，显示“登录成功”、“登陆失败”，“确认删除”、“删除成功”、“删除失败”。
实体类、dao层、service层、util工具类、BaseServlet类省略

import entity.Student;
import service.StuService;
import util.Constants;
import util.DBUtils;
import util.ParameterUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "StudentServlet", urlPatterns = "/stu")
public class StudentServlet extends BaseServlet {
    private StuService stuService = new StuService();

    public void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        String username = ParameterUtil.getString(request, "username");
        String password = ParameterUtil.getString(request, "password");
        Student student = stuService.login(username, password);
        System.out.println(student);
        if (student != null) {
            response.getWriter().print("{\"code\":1}");
        } else {
            response.getWriter().print("{\"code\":0}");
        }
        response.getWriter().close();
    }

    public String stuList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Student> studentList = stuService.getStuList();
        request.setAttribute("studentList", studentList);
        return Constants.FORWARD + "WEB-INF/stuList.jsp";
    }

    public void delStu(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        Integer id = ParameterUtil.getInteger(request, "id");
        int res = stuService.delete(id);
        if (res > 0) {
            response.getWriter().print("{\"code\":1}");
        } else {
            response.getWriter().print("{\"code\":0}");
        }
        response.getWriter().close();
    }

}

登录页面

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/jquery-1.10.2.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        .container2005 {
            padding-right: 15px;
            padding-left: 15px;
            padding-top: 15px;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
</head>
<body>
<div class="container2005">
    <form>
        <div class="form-group">
            <label for="uname">用户名</label>
            <input type="email" class="form-control" name="username" placeholder="username" id="uname">
            <p class="help-block" id="msg"></p>
        </div>
        <div class="form-group">
            <label for="pwd">密码</label>
            <input type="password" class="form-control" name="password" id="pwd" placeholder="Password">
        </div>

        <button type="button" onclick="loginStu();" class="btn btn-default">Submit</button>
    </form>
</div>
<script>
    function loginStu() {
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/stu?methodName=login",
            data: $("form").serialize(),
            dataType: "json",
            success: function (ret) {
                console.log(ret)
                console.log(ret.code)
                if(ret.code){
                    alert("登录成功")
                    location.href="${pageContext.request.contextPath}/stu?methodName=stuList"
                }else {
                    alert("登陆失败")
                }
            }
        });
    }
</script>
</body>
</html>

用户列表页面

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/jquery-1.10.2.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        .container2005 {
            padding-right: 15px;
            padding-left: 15px;
            padding-top: 15px;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
</head>
<body>
<div>
    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>realname</th>
            <th>password</th>
            <th>operation</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.studentList}" var="stu">
            <tr>
                <td>${stu.id}</td>
                <td>${stu.username}</td>
                <td>${stu.realname}</td>
                <td>${stu.password}</td>
                <td>
                    <input type="button" value="删除" class="btn btn-danger" onclick="delStu(${stu.id},this)">
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<script>
    function delStu(id, tar) {
    if (confirm("确认删除")) {
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/stu?methodName=delStu",
                dataType: "json",
                data: "id=" + id,
                success: function (ret) {
                    if (ret.code == 1) {
                        alert("删除成功")
                        $(tar).parent().parent().remove();
                    } else {
                        alert("删除失败")
                    }
                }
            });
        }
    }
</script>
</body>
</html>

普通还不自信的程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX 登录与删除

通过ajax在登录、删除时弹出提示框，显示“登录成功”、“登陆失败”，“确认删除”、“删除成功”、“删除失败”。实体类、dao层、service层、util工具类、BaseServlet类省略import entity.Student;import service.StuService;import util.Constants;import util.DBUtils;import util.ParameterUtil;import javax.servlet.ServletExceptio
复制链接

扫一扫