实现web端增删改查

我不是女神ヾ 2022-10-01 05:49 116阅读 0赞

1.把该导入的jar包和jquery导入

2.主页的jsp代码：

<%@ page contentType="text/html;charset=utf-8" language="java" %>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/util.js"></script>
    <html>
    <head>
        <title>table</title >
    </head>
    <style type="text/css">
        body {
            font: 0.8em 宋体;
        }
        table.tbl{ /* 折叠所有表格边框--使单元格共享边框*/
            border-collapse:collapse;
        }
        table.tbl td,th { /* 给单元格设置边框线 */
            border: 1px solid #99CCCC;
            text-align:left;
            padding:4px 4px;
        }
        table.tbl th[scope="col"] {  /*给列表头文字加粗，加背景色 */
            font: inherit;
            background-color:#00ddcc;
        }
        table.tbl caption {
            font-size: 1.2em;
            margin-bottom: .5em;
        }
        #button1{
            background-color: #EFEEDC;
            height: 60px;
            padding: 10px 0;
            line-height: 28px;
        }
        #button2{
            background-color: #EFEEDC;
            height: 60px;
            padding: 10px 0;
            line-height: 28px;
        }
        #button3{
            background-color: #EFEEDC;
            height: 60px;
            padding: 10px 0;
            line-height: 28px;
        }
        </style>
    <body>
    <table border="1" cellspacing="0" cellpadding="0" id="tbl">
    </table>
    <button id="button1" onclick="add()">添加</button>
    <button id="button2" onclick="deletes()">删除</button>
    <button id="button3" onclick="update()">修改</button>
    <script>
        var servletUrl = "./student";
        var students;
        var selectedIndex;
        var stuId;
    
        $(function () {
            query();
        });
    
        //查询的数据库表单
        function query() {
            var param = {op:"query"};
            // var e = document.getElementById("#id");
            // $("#id")
            $.post(servletUrl,param,function (result) {
                console.log(result);
                var data = JSON.parse(result);
                if (data.success) {
                    students = data.students;
                    var str = "<tr>\n" +
                        "        <th>ID</th>\n" +
                        "        <th>姓名</th>\n" +
                        "        <th>性别</th>\n" +
                        "        <th>生日</th>\n" +
                        "    </tr>";
                    for (var i in data.students) {
                        str += "<tr onclick='selection(this,"+data.students[i].id+","+i+")'>" +
                            "<th>" + data.students[i].id + "</th>" +
                            "<th>" + data.students[i].name + "</th>" +
                            "<th>" + data.students[i].sex + "</th>" +
                            "<th>" + data.students[i].birthday + "</th>" +
                            "</tr>";
                    }
                    $("#tbl").html(str);
                } else {
                    alert(data.msg);
                }
            });
        }
    
        //添加对象
        function add() {
            window.location.href = "reg.jsp";   //跳转到另外一个填写信息的页面
        }
    
        //删除对象
        function deletes() {
            var student = {"id":stuId,"name":"","sex":"","birthday":""};
            var param = {op: "delete", student: JSON.stringify(student)};
            $.post(servletUrl, param, function (result) {
                console.log(result);
                var data = JSON.parse(result);
                if (data.success) {
                    window.location.reload();
                    alert("删除成功");
                } else {
                    alert(data.msg);
                }
            });
        }
    
        //捕客户端选中对象
        function selection(selectedTr,id,index) {
            $("tr").css("background","#fcfbe9");
            $(selectedTr).css("background","#b6b6fc");
            selectedIndex = index;
            stuId = id;
        }
    
        //修改对象
        function update() {
            var param = encodeURI(JSON.stringify(students[selectedIndex])); //Tomcat9.0以上需要自己加上解码命令
            window.location.href = "update.jsp?student="+param;
        }
    </script>
    </body>
    </html>

页面效果：

![20190611155016763.png][]

3.跳转添加信息页面jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <html>
    <head>
        <title>填写用户信息</title>
    </head>
    <body>
    <form method="post">
        姓名：<input id="username" type="text" name="username"><br>
        性别：<input id="sex" type="radio" name="sex" value="男" checked="checked">男
        <input type="radio" name="sex" value="女">女<br>
        生日：<input id="birthday" type="text" name="birthday"><br>
        <input type="button" value="提交" onclick="get()"><br>
    </form>
    </body>
    <script>
        //得到用户数据
        function get() {
            var username = document.getElementById('username').value;
            var sex = $('input:radio[name="sex"]:checked').val();
            var birthday = document.getElementById('birthday').value;
            var servletUrl = "./student";
            var student = {"name":username,"sex":sex,"birthday":birthday};
            var param = {op: "add", student: JSON.stringify(student)};
            $.post(servletUrl, param, function (result) {
                console.log(result);
                var data = JSON.parse(result);
                if (data.success) {
                    alert("添加成功，一秒后跳转到主页面");
                    setTimeout(function(){
                        window.location.href = "table.jsp";
                    }, 1000);
                } else {
                    alert(data.msg);
                }
            });
        }
    </script>
    </html>

4.自己在修改信息也是跳转到另外一个jsp页面并保存之前的用户信息：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/jquery.params.js"></script>
    <html>
    <head>
        <title>修改属性</title>
    </head>
    <body>
    <form method="post">
        姓名：<input id="username" type="text" name="username"><br>
        性别：
        <input type="radio" name="sex" value="男" checked="checked">男
        <input type="radio" name="sex" value="女">女<br>
        生日：<input id="birthday" type="text" name="birthday"><br>
        <input type="button" value="提交" onclick="save()"><br>
    </form>
    </body>
    <script>
        var student;
        var id;
    
        $(function () {
            init();
        })
    
        //填充原有属性
        function init() {
            student = JSON.parse($.query.get("student"));
            id = student.id;
            $("#username").val(student.name);
            $("#birthday").val(student.birthday);
            $("input:radio[name=sex][value="+student.sex+"]").attr("checked",true);
        }
    
        //储存修改后数据
        function save() {
            var username = document.getElementById('username').value;
            var sex = $('input:radio[name="sex"]:checked').val();
            var birthday = document.getElementById('birthday').value;
            var servletUrl = "./student";
            var student = {"id":id,"name":username,"sex":sex,"birthday":birthday};
            var param = {op: "update", student: JSON.stringify(student)};
            $.post(servletUrl, param, function (result) {
                console.log(result);
                var data = JSON.parse(result);
                if (data.success) {
                    alert("修改成功，一秒后跳转到主页面");
                    setTimeout(function(){
                        window.location.href = "table.jsp";
                    }, 1000);
                } else {
                    alert(data.msg);
                }
            });
        }
    </script>
    </html>

servlet端后台代码：

public class StudentServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            doPost(req, resp);
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            req.setCharacterEncoding("UTF-8");
            resp.setContentType("text/html;charset=UTF-8");
            String op = req.getParameter("op");
            String result = "";
            switch (op){
                case "add":
                    result = add(req);
                break;
                case "delete":
                    result = delete(req);
                    break;
                case "update":
                    result = update(req);
                    break;
                case "query":
                    result = query(req);
            }
            PrintWriter out = resp.getWriter();
            out.println(result);
            out.flush();
            out.close();
        }
    
        /**
         * 修改数据信息
         * @param req
         * @return 成功提示，或失败提示
         */
        private String update(HttpServletRequest req) {
            Student student = JSON.parseObject(req.getParameter("student"),Student.class);
            int effect = StudentDAO.update(student);
            JSONObject json = new JSONObject();
            if(effect == -1){
                json.put("success",false);
                json.put("msg","修改数据错误");
            }else{
                json.put("success",true);
                json.put("effect",effect);
            }
            return json.toString();
        }
    
        /**
         * 删除数据信息
         * @param req
         * @return 成功提示，或失败提示
         */
        private String delete(HttpServletRequest req) {
            Student student = JSON.parseObject(req.getParameter("student"),Student.class);
            int effect = StudentDAO.delete(student.getId());
            JSONObject json = new JSONObject();
            if(effect == -1){
                json.put("success",false);
                json.put("msg","添加数据错误");
            }else{
                json.put("success",true);
                json.put("effect",effect);
            }
            return json.toString();
        }
    
        /**
         * 增添数据信息
         * @param req
         * @return 成功提示，或失败提示
         */
        private String add(HttpServletRequest req) {
            Student student = JSON.parseObject(req.getParameter("student"),Student.class);
            int effect = StudentDAO.insert(student);
            JSONObject json = new JSONObject();
            if(effect == -1){
                json.put("success",false);
                json.put("msg","添加数据错误");
            }else{
                json.put("success",true);
                json.put("effect",effect);
            }
            return json.toString();
        }
    
        /**
         * 查询数据信息
         * @param req
         * @return 成功提示，或失败提示
         */
        private String query(HttpServletRequest req) {
            List<Student> students = StudentDAO.select();
            JSONObject json = new JSONObject();
            if(students == null){
                json.put("success",false);
                json.put("msg","查询数据错误");
            }else{
                json.put("success",true);
                json.put("students",students);
            }
            return json.toString();
        }
    
    }

Dao层代码就不展示了。

[20190611155016763.png]: /images/20220119/93fafe986336409da79c413dc613a512.png