[JavaScript知识库]ssm整合案例的笔记，ajax、对json数据的操作

atguigu.ssm整合案例

• 使用json进行数据交互，而不是采用返回一个页面的方式，这样能方便移动端设备解析数据

引入的静态资源放在webapp目录下

<script src="/ssmbuild/static/js/jquery-3.6.0.js"></script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UPy9j7QK-1637504034029)(C:\Users\yyp\AppData\Roaming\Typora\typora-user-images\image-20211121201919033.png)]

• 在控制器方法中，添加了@Responsebody注解，那么该方法就会返回json字符串给客户端，所以只利用json在页面显示数据即可

使用ajax请求中得到的数据，来将其显示到页面中

        <%--页面加载完成后，发送ajax请求--%>
        $(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/emps",
                data: "pn=1",
                type: "POST",
                success: function (result) {
                    //    1、解析 显示员工数据
                    build_emps_table(result);
                    //    2、解析 显示分页信息
                }
            });
        });

上述代码，通过ajax拿到了json数据，然后调用 js 中的方法，把json数据传递到方法中

再通过下面的jQuery来将数据拼接到页面展示

function build_emps_table(result) {
            //通过ajax得到了返回的数据
            var emps = result.extend.pageInfo.list;
            //(要遍历的对象，操作函数(这个index必须加上,item表示现在操作的emps中的一个对象))
            $.each(emps, function (index, item) {
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var genderTd = $("<td></td>").append(item.gender);
                var emailTd = $("<td></td>").append(item.email);
                var deptNameTd = $("<td></td>").append(item.department.deptName);
                var btn1 = $("<td></td>").append("<button class=\"btn btn-success btn-sm\"> <span class=\"glyphicon glyphicon-pencil\" aria-hidden=\"true\"></span>修改</button>")
                    .append("<button class=\" btn btn-danger btn-sm\"> <span class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></span>删除</button>")

                $("<tr></tr>").append(empIdTd)
                    .append(empNameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptNameTd)
                    .append(btn1)
                    .appendTo($("#emps_table tbody"))
            })
        }

在jQuery中，append() 是将 () 中的内容追加到第一个标签中

appendTo() 是将前面所有的内容追加到其 ( ) 所指代的标签中去

• 创造一个通用的类，能将json数据返回给客户端的同时，也能返回数据操作方式以及操作成功与否的信息

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Msg {

    private int code; //状态码：100成功；200失败
    private String msg;
    private Map<String,Object> extend = new HashMap<String, Object>();

    public static Msg success(){
        Msg result = new Msg();
        result.setCode(100);
        result.setMsg("处理成功");
        return result;
    }

    public static Msg fail(){
        Msg result = new Msg();
        result.setCode(200);
        result.setMsg("处理失败");
        return result;
    }

    public Msg add(String key,Object value){
        this.getExtend().put(key,value);
        return this;
    }

}

这个类，能够返回分页信息还有操作成败的相关信息。

关键点就是内部定义了一个 Map 属性，把分页信息可以添加到 Map 中。又由于我们返回的是 json 数据，而json字符串在输出的时候会输出这个类的 toString 方法，所以 Msg 这个类中的所有属性都能获取到，包括被添加到 Map 中的分页数据。

妙的地方就是，这个方法中success是静态的，可以通过 Msg.success() 直接在控制器方法返回；如果你还需要添加数据，那就直接在后面调用 add 方法，因为静态 success() 方法放回的就是Msg，故可以调用 add() ，而这个 add() 里面用的是 this.getExtend().put(key,value);，也就是说他操作的就是前面那个Msg，意思就是把数据加到了当前同一个 Msg 中。

web路径问题

• 在src中，不以/开头的路径，寻找资源的时候，以当前资源路径为基准
• 以/开头的路径，寻找资源的时候，以服务器的路径为基准

如：当前路径为http://localhost:8080/ssmbuild

服务器路径为http://localhost:8080/

• ${pageContext.request.contextPath}
  

  表示到当前的上下文路径：http://localhost:8080/ssmbuild/

• 注意：静态资源放在webapp下，而不是WEB-INF目录下

• 应用

<script src="/ssmbuild/static/js/jquery-3.6.0.js"></script>

这里的 / 就代表的服务器路径