用ajax写出新增、删除、修改等操作并带有分页

本文链接：https://blog.csdn.net/qq_64303016/article/details/133803064

1、pojo层代码

package com.example.ajax.pojo;

import java.util.Date;

/**
 * @Author song
 * @Date 2023/10/8
 */
public class PatientInfo {
    private int bh;
    private String jzkh;
    private String name;
    private String tel;
    private String sex;
    private double age;
    private Date tjsj;
    private String tjr;

    public int getBh() {
        return bh;
    }

    public void setBh(int bh) {
        this.bh = bh;
    }

    public String getJzkh() {
        return jzkh;
    }

    public void setJzkh(String jzkh) {
        this.jzkh = jzkh;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getTel() {
        return tel;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public double getAge() {
        return age;
    }

    public void setAge(double age) {
        this.age = age;
    }

    public Date getTjsj() {
        return tjsj;
    }

    public void setTjsj(Date tjsj) {
        this.tjsj = tjsj;
    }

    public String getTjr() {
        return tjr;
    }

    public void setTjr(String tjr) {
        this.tjr = tjr;
    }
}

2、Mapper配置文件代码

<?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.example.ajax.dao.InPatientInfoDao">
    <select id="showAllPatientInfoByPage" resultType="HashMap" parameterType="com.example.ajax.pojo.PatientInfo">
        select bh,jzkh,name,tel,sex,age from patientInfo order by bh desc limit #{start},#{pageSize}
    </select>
    <select id="getTotalCount" resultType="int">
        select count(1) from patientinfo
    </select>
    <update id="updatePatientInfo" parameterType="com.example.ajax.pojo.PatientInfo">
        update patientinfo
        set jzkh=#{jzkh},name=#{name},tel=#{tel},sex=#{sex},age=#{age} where bh=#{bh}
    </update>
    <select id="getPatientInfoByBh" parameterType="int" resultType="com.example.ajax.pojo.PatientInfo">
        select bh,jzkh,name,tel,sex,age from patientInfo where bh=#{bh}
    </select>
    <delete id="delPatientInfo" parameterType="com.example.ajax.pojo.PatientInfo">
        delete from patientInfo where bh=#{bh}
    </delete>
    <select id="showAllPatientInfo" parameterType="HashMap" resultType="com.example.ajax.pojo.PatientInfo">
        select bh,jzkh,name,tel,sex,age,tjsj from patientInfo order by bh desc limit #{start},#{pageSize}
    </select>
    <insert id="savePatientInfo" parameterType="com.example.ajax.pojo.PatientInfo">
        insert into patientInfo(jzkh,name,tel,sex,age,tjsj,tjr)values(#{jzkh},#{name},#{tel},#{sex},#{age},now(),#{tjr})
    </insert>
</mapper>

3、Service层代码

package com.example.ajax.service;

import com.example.ajax.dao.InPatientInfoDao;
import com.example.ajax.pojo.PatientInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

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

/**
 * @Author song
 * @Date 2023/10/8
 */
@Service
public class PatientInfoService {
    @Autowired(required = false)
    InPatientInfoDao inPatientInfoDao;

    public List<PatientInfo> showAllPatientInfoByPage(HashMap map){
        return inPatientInfoDao.showAllPatientInfoByPage(map);
    }
    public int getTotalCount(){
        return inPatientInfoDao.getTotalCount();
    }
    public int updatePatientInfo(PatientInfo patientInfo){
        return inPatientInfoDao.updatePatientInfo(patientInfo);
    }
    public PatientInfo getPatientInfoByBh(int bh){
        return inPatientInfoDao.getPatientInfoByBh(bh);
    }
    public int delPatientInfo(int bh){
        return inPatientInfoDao.delPatientInfo(bh);
    }
    public List<PatientInfo> showAllPatientInfo(HashMap map){
        return inPatientInfoDao.showAllPatientInfo(map);
    }
    public int savePatientInfo(PatientInfo patientInfo){
        return inPatientInfoDao.savePatientInfo(patientInfo);
    }
    public InPatientInfoDao getInPatientInfoDao() {
        return inPatientInfoDao;
    }

    public void setInPatientInfoDao(InPatientInfoDao inPatientInfoDao) {
        this.inPatientInfoDao = inPatientInfoDao;
    }
}

4、Controller层代码

@Controller
public class AjaxPatientInfoController {
    @Autowired
    PatientInfoService patientInfoService;

    //完成数据修改
    @ResponseBody
    @RequestMapping("/updatePatientInfo")
    public String  updatePatientInfo(PatientInfo patientInfo){
        int num=patientInfoService.updatePatientInfo(patientInfo);
        if(num>0){
            return JSON.toJSONString("1");
        }else{
            return JSON.toJSONString("2");
        }
    }

    @RequestMapping("/getPatientInfoByBh")
    @ResponseBody
    public String getPatientInfoByBh(int bh){
        PatientInfo patientInfo=patientInfoService.getPatientInfoByBh(bh);
        return  JSON.toJSONString(patientInfo);
    }

    @RequestMapping("/delPatientInfo")
    @ResponseBody
    public String delPatientInfo(int bh){
        int num=patientInfoService.delPatientInfo(bh);
        if(num>0){
            return  JSON.toJSONString("1");
        }else{
            return  JSON.toJSONString("2");
        }
    }

    @ResponseBody
    @RequestMapping("/showAllPatientInfo")
    public String showAllPatientInfo(String pageNow){
        HashMap<String,Object> result=new HashMap<>();
        Page page=null;//声明page分页对象
        int totalCount=patientInfoService.getTotalCount();//获取总记录数
        if(pageNow!=null){
            page=new Page(totalCount,Integer.parseInt(pageNow));//实例化page对象
        }else{
            page=new Page(totalCount,1);
        }
        HashMap map=new HashMap();
        map.put("start",page.getStartPos());
        map.put("pageSize",page.getPageSize());
        List<PatientInfo> patientInfoList=patientInfoService.showAllPatientInfo(map);
        //传值list，pageNow，totalPageCount
        result.put("patientInfoList",patientInfoList);//传递获取的记录数据
        result.put("pageNow",page.getPageNow());//传递的当前页
        result.put("totalPageCount",page.getTotalPageCount());//传递的总页数
        return JSON.toJSONString(result);
    }
    //新增操作
    @ResponseBody
    @RequestMapping("/savePatientInfo")
    public  String savePatientInfo(PatientInfo patientInfo){
        patientInfo.setTjr("admin");
        int num=patientInfoService.savePatientInfo(patientInfo);
        if (num>0){
            return JSON.toJSONString("1");
        }else {
            return JSON.toJSONString("2");
        }
    }
    //显示操作页面
    @RequestMapping("/ajaxa7")
    public String showAjaxa7(){
        return "/ajax/Ajaxa7";
    }
    public PatientInfoService getPatientInfoService() {
        return patientInfoService;
    }

    public void setPatientInfoService(PatientInfoService patientInfoService) {
        this.patientInfoService = patientInfoService;
    }
}

5、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>病例信息管理</title>
    <link rel="stylesheet" href="/static/css/list.css"/>
    <link rel="stylesheet" href="/static/css/popup1.css"/>
    <script src="/static/js/jquery-3.6.1.js"></script>
</head>
<body>
<div id="all">
    <div id="top">
        <a href="#" id="savePatientInof">新增病例</a>
    </div>
    <!--修改悬浮窗口-->
    <div id="editPopDiv" style="display: none;">
        <span id="editClose">关闭</span>
        <h3 align="center">修改</h3>
        <form id="editPatientForm">
            <input type="hidden" name="bh" id="ebh"/>
            <input type="text" name="jzkh" id="ejzkh" readonly/><br><br>
            <input type="text" name="name" id="ename" /><br><br>
            <input type="text" name="tel" id="etel" /><br><br>
            性别：
            <input type="radio" name="sex" id="sex1" value="男" />男
            <input type="radio" name="sex" id="sex2" value="女" />女
            <br><br>
            <input type="text" name="age" id="eage" /><br><br>
            <input type="button" value="修改" id="editButton"/>
        </form>
    </div>
    <!--新增悬浮窗口-->
    <div id="popDiv" style="display: none;">
        <span id="close">关闭</span>
        <h3 align="center">新增</h3>
        <form id="savePatientForm">
            <input type="text" name="jzkh" id="jzkh" placeholder="请输入就诊卡号" /><br><br>
            <input type="text" name="name" id="name" placeholder="请输入姓名" /><br><br>
            <input type="text" name="tel" id="tel" placeholder="请输入手机号" /><br><br>
            性别：
            <input type="radio" name="sex"  value="男" checked/>男
            <input type="radio" name="sex"  value="女" />女
            <br><br>
            <input type="text" name="age" id="age" placeholder="请输入年龄" /><br><br>
            <input type="button" value="保存" id="saveButton"/>
        </form>
    </div>
    <div id="bottom">
        <table border="1" align="center" width="90%" id="table1">
            <caption>病例信息</caption>
            <tr>
                <th>编号</th>
                <th>就诊卡号</th>
                <th>真实姓名</th>
                <th>手机号</th>
                <th>性别</th>
                <th>年龄</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
        </table>
    </div>
</div>
<script>
    $(function () {
        $("#editButton").click(function () {
            $.ajax({
                url:"/updatePatientInfo",
                dataType:"json",
                data:$("#editPatientForm").serialize(),
                success:function (msg) {
                    if(msg=="1"){
                        alert("数据修改成功");
                        $("#editPopDiv").fadeOut();
                        location.reload();
                    }else{
                        alert("数据修改失败");
                        $("#editPopDiv").fadeOut();
                    }

                }
            })
        }),
            $("table tbody").on("click",".toUpdate",function () {
                var bh=$(this).attr("id");
                $("#editPopDiv").fadeIn();
                $.ajax({
                    url:"/getPatientInfoByBh",
                    dataType:"json",
                    data:{"bh":bh},
                    success:function (data) {
                        if(data!=null){
                            $("#ebh").val(data.bh);
                            $("#ejzkh").val(data.jzkh);
                            $("#ename").val(data.name);
                            $("#etel").val(data.tel);
                            $(":radio[name='sex'][value='" + data.sex + "']").prop("checked", "checked");
                            $("#eage").val(data.age);
                        }
                    }
                })
            }),
            $("#editClose").click(function () {
                $("#editPopDiv").fadeOut();
            }),
            $("table tbody").on("click",".toDelete",function () {
                var bh=$(this).attr("id");
                $.ajax({
                    url:"/delPatientInfo",
                    dataType:"json",
                    data:{"bh":bh},
                    success:function (msg) {
                        if(msg=="1"){
                            alert("记录删除成功");
                            location.reload();
                        }else{
                            alert("记录删除失败");
                        }
                    }
                })
            }),
            showPage(1),
            $("#saveButton").click(function () {
                //获取值并非空校验
                var jzkh=$("#jzkh").val();
                var name=$("#name").val();
                var tel=$("#tel").val();
                var age=$("#age").val();
                if(jzkh==''){
                    alert("请输入就诊卡号");
                    return false;
                }
                if(name==''){
                    alert("请输入姓名");
                    return false;
                }
                if(tel==''){
                    alert("请输入手机号");
                    return false;
                }
                if(age==''){
                    alert("请输入年龄");
                    return false;
                }
                //发送异步请求
                $.ajax({
                    url:"/savePatientInfo",
                    dataType:"json",
                    data:$("#savePatientForm").serialize(),
                    success:function (data) {
                        if(data=="1"){
                            alert("数据保存成功");
                            $("#popDiv").fadeOut();
                            location.reload();
                        }else{
                            alert("数据保存失败");
                            $("#popDiv").fadeOut();
                        }
                    }
                })
            }),
            $("#savePatientInof").click(function () {
                $("#popDiv").fadeIn();
            }),
            $("#close").click(function () {
                $("#popDiv").fadeOut();
            })
    })
    function showPage(pageNow) {
        $.ajax({
            url:"/showAllPatientInfo",
            dataType:"json",
            data:{"pageNow":pageNow},
            success:function (data) {
                $(".info").remove();
                var msg=data.patientInfoList;
                var pageNow=data.pageNow;
                var totalPageCount=data.totalPageCount;
                for(var i=0;i<msg.length;i++){
                    var str="<tr class='info'>";
                    str=str+"<td>"+msg[i].bh+"</td>";
                    str=str+"<td>"+msg[i].jzkh+"</td>";
                    str=str+"<td>"+msg[i].name+"</td>";
                    str=str+"<td>"+msg[i].tel+"</td>";
                    str=str+"<td>"+msg[i].sex+"</td>";
                    str=str+"<td>"+msg[i].age+"</td>";
                    str=str+"<td>"+msg[i].tjsj+"</td>";
                    str=str+"<td>";
                    str=str+"<a href='#' id='"+msg[i].bh+"' class='toUpdate'>修改</a>";
                    str=str+"<a href='#' id='"+msg[i].bh+"' class='toDelete'>删除</a>";
                    str=str+"</td>";
                    str=str+"</tr>";
                    $("#table1").append(str);
                }
                var pageStr="<tr class='info'>";
                pageStr=pageStr+"<td colspan='8'>";
                // pageStr=pageStr+"<a href='#' onclick='showPage(1)'>首页</a>";
                // pageStr=pageStr+"<a href='#' onclick='showPage("+(pageNow-1)+")'>上一页</a>";
                // pageStr=pageStr+"<a href='#' onclick='showPage("+(pageNow+1>=totalPageCount?totalPageCount:pageNow+1)+")'>下一页</a>";
                // pageStr=pageStr+"<a href='#' onclick='showPage("+totalPageCount+")'>尾页</a>";
                pageStr=pageStr+"<a href='#' onclick='showPage(1)'>首页</a>";
                pageStr=pageStr+"<a href='#' onclick='showPage("+(data.pageNow-1)+")'>上一页</a>";
                pageStr=pageStr+"<a href='#' onclick='showPage("+(data.pageNow+1>=data.totalPageCount?data.totalPageCount:data.pageNow+1)+")'>下一页</a>";
                pageStr=pageStr+"<a href='#' onclick='showPage("+data.totalPageCount+")'>尾页</a>";
                pageStr=pageStr+"</td></tr>"
                $("#table1").append(pageStr);
            }
        })
    }
</script>
</body>
</html>

6、list.css代码

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

#all {
    width: 80%;
    margin: 20px auto;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#top {
    font-size: 24px;
    padding: 10px;
    background-color: #f2f2f2;
    color: white;
}

#bottom {
    padding: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #e0e0e0;
}

a {
    text-decoration: none;
    color: #007bff;
    margin: 0 5px;
}

.completed {
    color: green;
    font-weight: bold;
}

7、popup1.css代码

#popDiv,#editPopDiv {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 40%;
    width: 400px;
    height: 380px;
	text-align: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(0,0,0,.3);
}
#close,#editClose{
    cursor: pointer;
    position: absolute;
    border:1px solid grey;
    top: 2px;
    right: 10px;
}
input[type='button']{
    width: 200px;
    border-radius: 10px;
    background-color: darkgrey;
    font-size: 20px;
}