CRUDV2

最新推荐文章于 2024-09-29 08:33:21 发布

Vission8899

最新推荐文章于 2024-09-29 08:33:21 发布

阅读量133

点赞数

分类专栏： JavaWeb 文章标签： java js ajax html

本文链接：https://blog.csdn.net/qq_40863153/article/details/109218371

版权

JavaWeb 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

复制工程

复制ssm02_CRUD 成ssm03_CRUD_ajax
创建新模块

Controller方法返回值类型Object
（1）Controller方法返回类型可以有几种？

ModelAndView
void
String
Object
（2）@ResponseBody
调jackson库将Object转成json字符串返回
如果没有依赖jackson库则，抛出异常
HttpMessageNotWritableException: No converter found for return value of type: class java.util.ArrayList
（3）依赖配置jackson库

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

创建类似于之前的Info类

Controller方法返回Result对象

src\main\java\com\vission\bean\Result.java

package com.vission.bean;

public class Result {
    private int code;//编码 404 200
    private String msg;//提示信息
    private Object data; //数据
    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }
    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Object getData() {
        return data;
    }
    public void setData(Object data) {
        this.data = data;
    }
    //这个Init方法仅仅是因为老师觉得好用，虽然我并没有哪里看出来很方便。。。
    public static Result init(int code, String msg, Object data) {
        Result result = new Result(code, msg, data);
        return result;
    }
    private Result() {
    }
    private Result(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }
}

Controller方法返回Result

这个方法只带数据并非页面，先进入dept在进入listUI,通过listUI跳转如页面，进入页面会有静态方法加载再返回后台控制层从list方法中获取数据，以result对象形式传回页面
src\main\java\com\vission\Controller\DepartmentV2Controller.java

package com.vission.Controller;

import com.vission.Service.DepartmentService;
import com.vission.bean.Department;
import com.vission.bean.Result;
import org.slf4j.ILoggerFactory;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.swing.*;
import java.util.List;

@Controller
@RequestMapping("/deptv2") //写在类上面指定当前模块路径
public class DepartmentV2Controller {
    private static final  Logger l = LoggerFactory.getLogger(DepartmentV2Controller.class);
    @Autowired
    private DepartmentService departmentService;//controller调用 service层
    @RequestMapping(path="/listUI",method = RequestMethod.GET)
    public String listUI(){
        return "/list_depts";//这个才是网页入口
    }
    //这个方法只带数据并非页面，先进入dept在进入listUI,通过listUI跳转如页面
    //进入页面会有静态方法再返回后台控制层从list方法中获取数据，以result对象形式传回页面
    //地址上带UI表示打开页面，不带的表示返回数据
    @RequestMapping(path="/list",method = RequestMethod.GET)
    public @ResponseBody
    //将list调jackson转成json字符串
    Object list(){
        //业务逻辑 调用查找所有的部门的方法
        List<Department> list =  departmentService.findAllDepartments();
        System.out.println("V2"+list);
        return Result.init(200,"",list);//返回对象需要被转成json字符串
    }

    @RequestMapping(path="/delete",method = RequestMethod.GET)
    public @ResponseBody  Object delete(Integer did){
        //获取did，执行对该条记录的删除
        l.info("delete did="+did);
        try {
            departmentService.deletetDepartmentsByDid(did);
            return Result.init(200,"删除成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200,"删除失败",null);
    }

    //保存一般是使用post提交
    @RequestMapping(path="/add",method = RequestMethod.POST)
    public @ResponseBody Object add(String dname){
        l.info("add department="+dname);
        Department dept = new Department(dname);
        System.out.println(dept);
        try {
            departmentService.saveDepartment(dept);
            return  Result.init(200,"添加成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return  Result.init(-200,"添加失败",null);
    }

    @RequestMapping(path = "/update", method = RequestMethod.POST)
    @ResponseBody
    Object update(Department dept){
//        Department dept = new Department(did,dname);
        System.out.println("进入update"+dept);
        l.info("update dept="+dept);
        try {
            departmentService.updateDepartmentById(dept);
            return Result.init(200, "更新成功", null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200, "更新失败", null);
    }
    @RequestMapping(path = "/find", method = RequestMethod.GET)
    public @ResponseBody
    Object find(Integer did) {
        l.info("find did=" + did);//打数据
        if (did != null) {
            Department dept = departmentService.findDepartmentById(did);//查询回显需要的数据
            if (dept != null) {
                return Result.init(200, null, dept);//转成json返回页面
            }
        }
        return Result.init(-200, "没有查询结果", null);
    }
}

Ajax回顾

ajax是什么
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）
ajax有什么特点
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
什么是异步更新？
即可以在不重新加载整个网页的情况下，对网页的某部分进行更新

上一个版本使用重定向或者请求转发的，叫整体刷新
今天使用ajax不需要重定向或者请求转发

请求转发：A向B发送请求，想让B帮忙完成一项工作，当B接收到请求后发现自己完成不了，于是B请C帮忙，C接收到B的请求后最终完成了该项工作，并把最后的结果返回给A。此过程A只发送了一次请求给B，A只知道把请求发给B，至于B是怎么完成的A并不关心，他只等待最终的结果。
重定向：A向B发送请求，想让B帮忙完成一项工作，当B接收到请求后发现自己无法完成，就立即告诉A情况，并向A推荐C可以完成该项工作，于是A就找C帮忙，C最终完成该项工作，返回给A。

请求转发的不同点：

浏览器地址栏显示不同（表面区别）：
无论进行多少次请求，如果使用请求转发来实现，浏览器地址栏中只显示第一次发送请求的地址；
如果使用重定向来实现，浏览器地址栏显示的是每次请求的新地址。这只是表面上看到的不同地方。
组件之间可否共享信息不同（本质区别）
请求转发：发送第一次到最后一次请求的过程中，WEB容器只创建一次request和response对象，请求之间始终共享这两个对象，所以每个请求可以访问他之前请求中的参数和属性的值；
重定向时:浏览器每发送一次请求，WEB容器都会重新创建新的request和response对象，所以请求之间不能共享信息，即不能在请求中访问到他之前请求中的参数和属性的值。

ajax具体编程内容

js 发送请求
js 接收结果
js 更新页面
Jquery实现Ajax
在这里插入图片描述

这俩脚本导入
引入头标签内

<head>
    <!-- 引入-->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
    .
    .
    .
</head>

ajax传出接收数据
src\main\webapp\WEB-INF\jsp\list_depts.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<html>
<%
    pageContext.setAttribute("path", request.getContextPath());
%>
<head>
    <title>Title</title>
    <!-- 引入-->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
    <!-- 开始ajax编程  -->
    <script type="text/javascript">
        function deleteById(did) {
            $.get('${path}/deptv2/delete?did='+did,function (result) {
                console.info(result)
                if(200==result.code){
                    alert(result.msg)
                    refreshTable()//调用列表更新
                }else{
                    alert(result.msg)
                }
            },'json')
        }
        function switchDiv(part) {
            //隐藏内容
            $('#addDiv').css("display","none")
            $('#listDiv').css("display","none")
            $('#editDiv').css("display","none")
            if(1 == part){//添加页面
                $('#addDiv').css("display","block")
                $('#add_dname').val('')
            }else if(2 == part){//列表页面
                $('#listDiv').css("display","block")
            }else if(3 == part){//编辑页面
                $('#editDiv').css("display","block")
            }

        }
        function refreshTable(){
            //页面加载成功
            $('#table').html('')
            //1:js发送请求
            $.get('${path}/deptv2/list', function (result) {
                //2:js接收结果
                console.info("result=" + result)
                //{"code":200,"msg":"","data":[{"did":1,"dname":"JAVA"},{"did":2,"dname":"测试"},{"did":3,"dname":"最牛部门33"}]}

                //定义表格的内容
                var trs = ''
                //拼接表头
                trs += ' <tr>\n' +
                    '        <td>编号</td>\n' +
                    '        <td>部门名称</td>\n' +
                    '        <td>管理</td>\n' +
                    '\n' +
                    '    </tr>'
                if (200 == result.code) {
                    var items = result.data;
                    //3:js更新页面
                    for (var i = 0; i < items.length; i++) {
                        var dept = items[i]
                        console.info(dept)
                        trs += ' <tr>\n' +
                            '        <td>' + dept.did + '</td>\n' +
                            '        <td>' + dept.dname + '</td>\n' +
                            '        <td><a href="javascript:deleteById('+dept.did+')">删除 | </a><a href="javascript:updateUI('+dept.did+')">修改</a></td>\n' +
                            '\n' +
                            '    </tr>'
                    }//end for
                    $('#table').html(trs)
                }
            }, 'json')  //参1 地址 参2 处理函数  参3 数据类型


        }
        $(function () {
            switchDiv(2)
            refreshTable()
            $('#btn_add').click(function () {
                //alert('btn_add') 普通的表单提交 did=1&dname=测试组
                var data = $('#add_form').serialize() //方法会将表单数据拼接成k1=v1&k2=v2
                $.post('${path}/deptv2/add',data,function (result) {
                    console.info(result)
                    //页面切换
                    switchDiv(2)
                    //重新加载列表
                    refreshTable()
                    alert(result.msg)
                },'json')
            })
        })
        function updateUI(did) {
            //alert(did)
            //显示修改页面
            switchDiv(3)
            //获取被修改的数据作回显
            $.get('${path}/deptv2/find?did='+did,function (result) {
                if(200==result.code){
                    var dept = result.data;
                    //{"code":200,"msg":null,"data":{"did":9,"dname":"测试部门3"}}
                    $('#u_did1').val(dept.did)
                    $('#u_did2').val(dept.did)
                    $('#u_dname').val(dept.dname)
                }else{
                    alert(result.msg)//提示没有查询结果
                }
            },'json')
        }
        function update() {
            var data=$('#update_form').serialize();// k1=v1&k2=v2
            $.post('${path}/deptv2/update',data,function (result) {
                alert(result.msg)
                //切换页面
                switchDiv(2)
                //刷新列表
                refreshTable()
            },'json')
        }
    </script>
</head>
<body>
<div id="listDiv" style="display: block">
    <a href="javascript:switchDiv(1)">新增</a>
    <table border="1px" width="100%" id="table">
    </table>
</div>
<div id="addDiv">
    <h1>添加页面</h1>
    <form id="add_form"  >
        <input type="hidden" name="did"/><br/>
        <input type="text" name="dname" id="add_dname"/><br/>
        <input id="btn_add" type="button" value="保存"/><br/>
    </form>
</div>
<div id="editDiv">
    <h1>编辑页面</h1>
    <form id="update_form">
        <input id="u_did1" type="hidden" name="did"  >
        <input id="u_did2" type="text"   disabled="disabled"/><br/>
        <input id="u_dname" type="text" name="dname" /><br/>
        <input id="btn_update" onclick="update()" type="button" value="保存修改"/><br/>
    </form>
</div>
</body>
</html>

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

Ajax提交json给控制器方法

k1=v1&k2=v2 是由$(’#update_form’).serialize() 不是json
{k1:v1,k2:v2}

（1）控制器方法

@RequestMapping(path = “/update2”, method = RequestMethod.POST,consumes = "application/json")
public String update2(@RequestBody Department department)

（2）postman提交
（3）前台页面提交
$.ajax()
contentType:“application/json;charset=UTF-8”,
DepartmentV3Controller

@Controller
@RequestMapping("/deptv3")
public class DepartmentV3Controller {
    private static final Logger l = LoggerFactory.getLogger(DepartmentV3Controller.class);
    @Autowired
    IDepartmentService iDepartmentService;

    @RequestMapping(path="/addUI",method = RequestMethod.GET)
    public String addUI(){
        return "add_dept";
    }
    @RequestMapping(path="/add",method = RequestMethod.POST,consumes = "application/json")
    public @ResponseBody  Object add(@RequestBody  Department dept){//{did:0,dname:IOS}
        l.info("add dept="+dept);
        try {
            iDepartmentService.saveDepartment(dept);
            return Result.init(200,"添加成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200,"添加失败",null);
    }
}

add_dept.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<html>
<%
    pageContext.setAttribute("path", request.getContextPath());
%>
<head>
    <title>Title</title>
    <!-- 引入-->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>

    <script type="text/javascript">
        $(function () {
                $('#btn_add').click(function () {
                   //js发送请求
                   var dname= $('#add_dname').val()
                    console.info(dname)
                    $.ajax({
                        url:'${path}/deptv3/add',
                        async:true,
                        data:'{"did":"","dname":"'+dname+'"}',
                        type:"post",
                        contentType:"application/json;charset=UTF-8",
                        success:function (result) {    //js接收结果
                            if(200==result.code){
                                alert(result.msg) //js更新页面
                                //刷新列表
                            }
                        },
                        error:function () {
                            alert('服务问题，请求失败')
                        }
                    });



                })
        })
    </script>
</head>
<body>

    <div id="addDiv">
        <h1>添加页面</h1>
        <form id="add_form"  >
            <input type="hidden" name="did" id="add_did"/><br/>
            <input type="text" name="dname" id="add_dname"/><br/>
            <input id="btn_add" type="button" value="保存"/><br/>
        </form>
    </div>

</body>
</html>