SSM整合版本二之Ajax的CRUD

最新推荐文章于 2021-08-06 15:11:17 发布

虎太郎u

最新推荐文章于 2021-08-06 15:11:17 发布

阅读量166

点赞数

分类专栏： SSM框架 Spring Mybatis 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_45114005/article/details/109259067

版权

SSM框架同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

Spring

6 篇文章 0 订阅

订阅专栏

Mybatis

6 篇文章 0 订阅

订阅专栏

SSM整合-Ajax的增删改查

创建Maven工程

分包增添模块

controller
dao
pojo
service
pom.xml文件依赖架构

<properties>
       <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
       <maven.compiler.source>1.8</maven.compiler.source>
       <maven.compiler.target>1.8</maven.compiler.target>
       <spring.version>5.2.9.RELEASE</spring.version>
       <slf4j.version>1.6.6</slf4j.version>
       <log4j.version>1.2.12</log4j.version>
       <mysql.version>5.1.6</mysql.version>
       <mybatis.version>3.4.5</mybatis.version>
   </properties>

Resouce文件正常配置即可

技术要点

Controller方法返回值类型Object
（1） Controller方法返回的几种类型
ModelAndView
void
String
Object
（2）@ResponseBody注解
调jackson库将Object转成json字符串返回
如果没有依赖jackson库则，抛出异常。所以需要配置依赖的Jackson库

<dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.11.3</version>
      </dependency>

Controller方法返回Result
返回Result

    private int code;//编码
    private String msg;//提示信息
    private Object data;

将数据能够放进Result对象里面

    public static Result init(int code, String msg, Object data){
        Result result =new Result(code,msg,data);
        return result;
    }

    public Result() {
    }

    public Result(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

Controller方法返回Result

@Controller
@RequestMapping("/resume")
public class ResumeController {
    private static final Logger log = Logger.getLogger(ResumeController.class);
    @Autowired
    private ResumeService resumeService;

    @RequestMapping(path = "/listUI", method = RequestMethod.GET)
    public String listUI() {

        return "list_resume";
    }

Ajax的使用（详细会出一篇博客进行说明）

（1）ajax是什么
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
（2）ajax的特点
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
ps:本版本使用ajax不需要重定向或者请求转发
Jquery实现Ajax
导入jQuery库
在页面最上方引入库

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%pageContext.setAttribute("path", request.getContextPath());%>

jQuery代码编写

编写逻辑
js 发送请求 $.get $.post serialize()
js 接收结果 function(data){…}
js 更新页面 $(id值) html()
Jquery实现员工列表

  $(function () {
	$.get('${path}/resume/list', function (result) {

                console.info("result =" + result)

                var trs = ''
                trs += '<tr>\n' +
                    '        <td>编号</td>\n' +
                    '        <td>用户名</td>\n' +
                    '        <td>密码</td>\n' +
                    '        <td>毕业院校</td>\n' +
                    '        <td>年龄</td>\n' +
                    '        <td>出生日期</td>\n' +
                    '        <td>操作</td>\n' +
                    '\n' +
                    '    </tr>'
                if (200 == result.code) {
                    var items = result.data;

                    for (var i = 0; i < items.length; i++) {
                        var ruser = items[i]
                        console.info(ruser)
                        trs += ' <tr>\n' +
                            '        <td>' + ruser.id + '</td>\n' +
                            '        <td>' + ruser.username + '</td>\n' +
                            '        <td>' + ruser.password + '</td>\n' +
                            '        <td>' + ruser.edg + '</td>\n' +
                            '        <td>' + ruser.age + '</td>\n' +
                            '        <td>' + ruser.birthday + '</td>\n' +
                            '        <td><a href="javascript:deleteById(' + ruser.id + ')">删除 |</a><a href="javascript:updateUI(' + ruser.id + ')">修改</a></td>\n' +
                            '\n' +
                            '    </tr>'
                    }//end for

                    $('#table').html(trs)
                }

            }, 'json')  //参1 地址 参2 处理函数  参3 数据类型


        }

删除指定id的员工
Controller层

@RequestMapping(path="/delete",method = RequestMethod.GET)
    public @ResponseBody  Object delete(Integer id){
        log.info("delete id"+id);
        try {
            resumeService.deleteRuserById(id);
            return Result.init(200,"删除成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200,"删除失败",null);

    }

list _resume.jsp

 function deleteById(id) {
            $.get('${path}/resume/delete?id=' + id, function (result) {
                console.info(result)
                if (200 == result.code) {
                    alert(result.msg)
                    refreshTable()//调用列表更新
                } else {
                    alert(result.msg)
                }
            }, 'json')
        }

默认情况下点击超链接是跳转页面-整体刷新
Ajax是局部刷新，点击链接调用函数，函数内部发起请求，处理返回结果，更新页面
属性display:none
Ajax不切换页面，所有内容在一个页面，只需要通过style的属性display，将值设置为none不可见，不占高度。
如果需要显示出来，设置display的值为block

 function switchDiv(part) {
            //隐藏内容
            $('#addDiv').css("display", "none")
            $('#listDiv').css("display", "none")
            $('#editDiv').css("display", "none")
            if (1 == part) {//
                $('#addDiv').css("display", "block")
                $('#add_id').val()
                $('#add_username').val('')
                $('#add_password').val('')
                $('#add_edg').val('')
                $('#add_age').val('')
                $('#add_birthday').val('')
            } else if (2 == part) {//列表页面
                $('#listDiv').css("display", "block")
            } else if (3 == part) {//编辑页面
                $('#editDiv').css("display", "block")
            }

        }

添加功能

 @RequestMapping(path="/add",method = RequestMethod.POST)
    public @ResponseBody
    Object add(Ruser ruser){
        log.info("add Ruser"+ruser);
        try {
            resumeService.saveRuser(ruser);
            return Result.init(200,"添加员工成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200,"添加员工失败",null);
    }

前台代码

<div id="addDiv">
    <h1>添加页面</h1>
    <form id="add_form">
        <input type="hidden" name="did" id="add_id"/><br/>
        <input type="text" name="username" /><br/>
        <input type="text" name="password" id="add_password"/><br/>
        <input type="text" name="edg" id="add_edg"/><br/>
        <input type="text" name="age" id="add_age"/><br/>
<%--        <input type="date" name="birthday" id="add_birthday"/><br/>--%>
        <input id="btn_add" type="button" value="保存"/><br/>
    </form>
</div>

修改代码
修改带有回显（就是先查到再赋值再修改）
回显代码

 function updateUI(id) {
            alert(id)
            //显示修改页面
            switchDiv(3)
            //获取被修改的数据作回显
            $.get('${path}/resume/find?id=' + id, function (result) {
                if (200 == result.code) {
                    var ruser = result.data;
                    //{"code":200,"msg":null,"data":{"did":9,"dname":"测试部门3"}}
                    $('#u_id1').val(ruser.id)
                    $('#u_id2').val(ruser.id)
                    $('#u_username').val(ruser.username)
                    $('#u_password').val(ruser.password)
                    $('#u_edg').val(ruser.edg)
                    $('#u_age').val(ruser.age)
                    $('#u_birthday').val(ruser.birthday)
                    $('#u_username1').val(ruser.username)
                    $('#u_password1').val(ruser.password)
                    $('#u_edg1').val(ruser.edg)
                    $('#u_age1').val(ruser.age)
                    $('#u_birthday1').val(ruser.birthday)
                } else {
                    alert(result.msg)//提示没有查询结果
                }
            }, 'json')
        }

调用查询

@RequestMapping(path = "/find", method = RequestMethod.GET)
    public @ResponseBody
    Object find(Integer id) {
        log.info("find id=" + id);//打数据
        if (id != null) {
            Ruser ruser = resumeService.finResumeById(id);
            if (ruser != null) {
                return Result.init(200, null, ruser);//转成json返回页面
            }
        }
        return Result.init(-200, "没有查询结果", null);
    }

正式修改后台代码

 @RequestMapping(path = "/update", method = RequestMethod.POST)
    @ResponseBody
    Object update(Ruser ruser){
        log.info("update ruser="+ruser);
        try {
            resumeService.updateRuserById(ruser);
            return Result.init(200, "更新成功", null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200, "更新失败", null);
    }

前台代码

 function update() {
            var data = $('#update_form').serialize();// k1=v1&k2=v2
            $.post('${path}/resume/update', data, function (result) {
                alert(result.msg)
                //切换页面
                switchDiv(2)
                //刷新列表
                refreshTable()
            }, 'json')
        }

表单代码

<div id="editDiv">
    <h1>编辑页面</h1>
    <form id="update_form">
        <input id="u_id1" type="hidden" name="id">
        <input id="u_id2" type="text" disabled="disabled"/><br/>
        <input id="u_username" type="text" disabled="disabled"/><br/>
        <input id="u_password" type="text" disabled="disabled"/><br/>
        <input id="u_edg" type="text" disabled="disabled"/><br/>
        <input id="u_age" type="text" disabled="disabled"/><br/>
        <input id="u_birthday" type="text" disabled="disabled"/><br/>

        <input id="u_username1" type="text" name="username"/><br/>
        <input id="u_password1" type="text" name="password"/><br/>
        <input id="u_edg1" type="text" name="edg"/><br/>
        <input id="u_age1" type="text" name="age"/><br/>
        <input id="btn_update" onclick="update()" type="button" value="保存修改"/><br/>
    </form>
</div>