勿谓今日不学而有来日,勿谓今年不学而有来年。
日月逝矣,岁不我延。

SSM框架的CURD案例二 Json交互与Ajax交互

目的

为了实现客户端无关性,采用页面发送Ajax请求,Controller返回Json然后页面使用js解析Json的方法处理数据的交互。

注解依赖

@Resopnbody注解依赖“Jackson”jar包需要在pom.xml中引入

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

用法

把返回信息进行封装,包含固定的状态码(可以自定义)和所携带的对象。

package cn.llanc.ssmcurd.entity;
import java.util.HashMap;
import java.util.Map;

public class Message {
 //状态码
 private int code;
 //提示信息
 private String msg;
 //用户数据
 private Map<String, Object> extend = new HashMap<String, Object>();

 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 Map<String, Object> getExtend() {
  return extend;
 }

 public void setExtend(Map<String, Object> extend) {
  this.extend = extend;
 }

 /**
 * 处理成功方法
 * @return
 */
 public static Message succrss(){
  Message result = new Message();
  result.setCode(100);
  result.setMsg("处理成功");
  return result;
 }
 /**
 * 处理失败方法
 * @return
 */
 public static Message fail(){
  Message result = new Message();
  result.setCode(200);
  result.setMsg("处理失败");
  return result;
 }

 /**
 * 信息添加方法,可以实现链式操作
 * @param key
 * @param value
 * @return
 */
 public Message add(String key, Object value) {
  this.getExtend().put(key, value);
  return this;
 }
}

在@Resopnbody注解的Congtroller中把Service返回的对象封装到Message中,Jackson会自动转换成json数据。

前台使用

在页面加载完成后发送ajax请求获取数据,然后使用js构建列表并读取json.

//发送请求
function rts(pn) {
    $.ajax({
        url:"${APP_PATH}/emps",
        data:"pn="+pn,
        type:"GET",
        success:function (result) {
            //    解析并显示员工信息
            build_emps_table(result);
            //    解析并显示分页信息
            build_page_info(result);
            //    解析并显示分页条
            build_page_nav(result);
        }
    });
}
//用户列表
function build_emps_table(result) {
    $("#emps_tbale tbody").empty();
    var emps=result.extend.pageInfo.list;
    $.each(emps,function (index,item) {
        var checkBox=$("<td><input type='checkbox' class='check-box'/></td>")
        var empIdTd=$("<td></td>").append(item.empId);
        var empNameTd=$("<td></td>").append(item.empName);
        var gender = item.gender == "M" ? "男" : "女";
        var genderTd=$("<td></td>").append(gender);
        var emailTd = $("<td></td>").append(item.email);
        var deptNameTd = $("<td></td>").append(item.department.deptName);
        var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
            .append($("<li></li>").addClass("fas fa-edit")).append(" 编辑");
        editBtn.attr("edit-id",item.empId);
        var deleteBtn=$("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
            .append($("<li></li>").addClass("fas fa-trash-alt")).append(" 删除");
        deleteBtn.attr("delete-id",item.empId);
        var btnTd=$("<td></td>").append(editBtn).append(" ").append(deleteBtn);
        $("<tr></tr>")
            .append(checkBox)
            .append(empIdTd)
            .append(empNameTd)
            .append(genderTd)
            .append(emailTd)
            .append(deptNameTd)
            .append(btnTd)
            .appendTo("#emps_tbale tbody")
    })
}

源码:https://github.com/llanc/SSM_CURD

赞(0)
未经允许不得转载:喋喋不休 » SSM框架的CURD案例二

评论 抢沙发

评论前必须登录!

 

精品网站

有券无忧电脑壁纸精选