SSM+AJAX+jsp,删除数据功能

最新推荐文章于 2023-03-18 08:45:00 发布

[猫玖]

最新推荐文章于 2023-03-18 08:45:00 发布

阅读量517

点赞数 1

分类专栏： # SSM框架文章标签： bootstrap ssm jsp ajax

本文链接：https://blog.csdn.net/weixin_44828720/article/details/118023984

版权

SSM框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2021.5.7_SSM+AJAX开发，删除功能

1.StudentMapper

package com.hy.mapper;

import com.hy.entity.Student;

import java.util.List;

public interface StudentMapper {

    //删除
    public int deleteStudent(Integer id);

}

StudentMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hy.mapper.StudentMapper">
    <!--删除-->
    <delete id="deleteStudent">
        delete from student where id = #{id}
    </delete>
</mapper>

2.StudentService

package com.hy.service;

import com.hy.entity.Student;

import java.util.List;

public interface StudentService {

    //删除
    public int deleteStudent(Integer id);

}

3.StudentServiceImpl

package com.hy.service;

import com.hy.entity.Student;
import com.hy.mapper.StudentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class StudentServiceImpl implements StudentService{

    @Autowired
    private StudentMapper studentMapper;

    //删除
    @Override
    public int deleteStudent(Integer id) {
        return studentMapper.deleteStudent(id);
    }

}

4.StudentController

package com.hy.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.hy.entity.Student;
import com.hy.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;

@Controller
@RequestMapping("/student")
public class StudentController {

    @Autowired
    private StudentService studentService;

    //删除
    @ResponseBody
    @RequestMapping("/deleteStudent")
    public String deleteStudent(Integer id){
        return studentService.deleteStudent(id)>0? "success":"error";
    }

}

5.jsp

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/5/5
  Time: 16:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Student</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <%--jQuery需要在bootstrap.前面--%>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.0/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .form-inline .form-group .btn{
              outline: none;
          }

        .table{
            text-align: center;
            margin-top: 10px;
        }
        .alert{
            display: none;
            width: auto;
            text-align: center;
            position: fixed;
            top: 20%;
            left:50%;

        }
        #delete_success,#add_success,#update_success{
            background:#19be6b;
            color: #ffff;
        }
        #delete_cancel,#add_cancel,#update_cancel{
            background: #ed4014;
            color: #ffffff;
        }
    </style>
</head>
<body>
<%--查询表单开始--%>
<form class="form-inline">
    <div class="input-group">
        <div class="input-group-addon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-open-fill" viewBox="0 0 16 16">
            <path d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2h.5a.5.5 0 0 1 .5.5V15h-1V2zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
        </svg></div>
        <input type="text" class="form-control" id="className" placeholder="班级" name="className">
    </div>
    <div class="input-group">
        <div class="input-group-addon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cursor-fill" viewBox="0 0 16 16">
                <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"/>
            </svg>
        </div>
        <input type="text" class="form-control" id="studentId" placeholder="学号" name="studentId">
    </div>
    <div class="input-group">
        <div class="input-group-addon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
                <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
            </svg>
        </div>
        <input type="text" class="form-control" id="studentName" placeholder="姓名" name="studentName">
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-default" onclick="select()">查询</button>
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-default" id="all">全部</button>
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addStudent">添加</button>
    </div>
</form>
<%--查询表单结束--%>

<%--表格开始--%>
<table  class="table table-bordered">
    <thead>
        <td>序号</td>
        <td>学号</td>
        <td>姓名</td>
        <td>学院</td>
        <td>专业</td>
        <td>班级</td>
        <td>操作</td>
    </thead>
    <tbody id="tbody"></tbody>
</table>
<%--表格结束--%>

<%--删除开始--%>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel">
    <div class="modal-dialog modal-sm" role="document" style="position: fixed;top: 10%;left: 45%">
        <div class="modal-content">
            <div class="modal-header" style="border: none">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 style="text-align: center">你确定删除吗？</h4>
            </div>
            <div class="modal-footer" style="border: none;text-align: center">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal" id="cancel_delete">取消</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-primary btn-sm" id="delete_ok" data-toggle="modal" data-target="#delete">确定</button>
            </div>
        </div>
    </div>
</div>
<%--删除结束--%>


<%--提示框开始--%>
<div class="alert alert-success" id="delete_success" role="alert">
    <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>&nbsp;删除成功
</div>
<div class="alert alert-danger" id="delete_cancel" role="alert">
    <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>&nbsp;已取消删除
</div>
<div class="alert alert-success" id="add_success" role="alert">
    <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>&nbsp;添加成功
</div>
<div class="alert alert-danger" id="add_cancel" role="alert">
    <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>&nbsp;已取消添加
</div>
<div class="alert alert-success" id="update_success" role="alert">
    <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>&nbsp;修改成功
</div>
<div class="alert alert-danger" id="update_cancel" role="alert">
    <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>&nbsp;已取消修改
</div>
<%--提示框结束--%>
</body>
<script>
    /*页面加载*/
    $(function (){
        select();
    })

    /*全部查询*/
    $("#all").click(function (){
       $("#studentId").val("");
       $("#studentName").val("");
       $("#className").val("");
        select();
    })


    /*查询开始*/
    function select() {
        var studentId = $("#studentId").val();
        var studentName = $("#studentName").val();
        var className = $("#className").val();
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/student/select",
            data:{"studentId":studentId,"studentName":studentName,"className":className},
            dataType:"json",
            success:function (response){
                var list = response.page.list;
                $("#tbody").html(" ");
                $.each(list,function (index,student){
                    let tbody=`
                        <tr>
                            <td>${"${index+1}"}</td>
                            <td>${"${student.studentId}"}</td>
                            <td>${"${student.studentName}"}</td>
                            <td>${"${student.college}"}</td>
                            <td>${"${student.major}"}</td>
                            <td>${"${student.className}"}</td>
                            <td>
                            <a class="btn btn-default btn-primary"  role="button" data-toggle="modal" data-target="#updateStudent" οnclick="byIdStudent(${"${student.id}"})">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span></a>
                            &nbsp;&nbsp;
                            <a class="btn btn-default btn-danger "  role="button" data-toggle="modal" data-target="#delete" οnclick="deleteStudent(${"${student.id}"})">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true" ></span></a>
                            </td>
                        </tr>`
                    $("#tbody").append(tbody);
                });
            }
        });
    }
    /*查询结束*/
    
    /*删除开始*/
    function deleteStudent(id){
        $("#delete_ok").click(function (){
            $.ajax({
                type:"get",
                url:"${pageContext.request.contextPath}/student/deleteStudent",
                data:{"id":id},
                dataType:"text",
                success:function (msg){
                    if (msg == "success"){
                        select();
                        $("#delete_success").show().delay(1500).fadeOut();
                    }
                }
            });
        });

        $("#cancel_delete").click(function (){
            $("#delete_cancel").show().delay(1500).fadeOut();
        });
    }
    /*删除结束*/

</script>
</html>

[猫玖]

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
SSM+AJAX+jsp,删除数据功能

2021.5.7_SSM+AJAX开发，删除功能1.StudentMapperpackage com.hy.mapper;import com.hy.entity.Student;import java.util.List;public interface StudentMapper { //删除 public int deleteStudent(Integer id);}StudentMapper.xml<?xml version="1.0" encod
复制链接

扫一扫