SpringBoot+Jquery实现前后端数据交互

场景

在企业架构管理中，可以实现启用和禁用功能。

在启用或者禁用前需要先验证是否已经是启用或禁用状态。

所以在前端Jquery中需要将数据库中要查询的id传递到后台。

后台根据Id查询状态，然后返回给前端数据与状态，前端进行判断显示。

实现

页面点击按钮触发事件

 <button class="btn btn-info " type="button" onclick="validateIsOpen()"><i class="fa fa-trash-o"></i>启用</button>

在jquery中的方法中

//验证是否启用
function validateIsOpen() {
        //获取选中的数据的id
        var ref = $('#org_tree').jstree(true),
            sel = ref.get_selected();
        sel = sel[0];
        //设置请求的url 与请求参数
        var url = '/sysEnterpriseOrg/validateIsOpened.do';
        //这句一定要加，不能只写data = sel
        var data = {"id":sel};
        $.post(url,data).done(function (res) {
           //请求后的回调方法
            if(res.status==true){
                //弹窗提示
                Swal.fire(
                    '无须重复启用!',
                    res.data,
                    'success'
                )
                //使跳出方法，不再往下执行
                return false;
            }else{
                //执行相关业务方法---启用操作
                orgOpen()
            }
        })
    }

后台Controller对应方法

@Description("验证是否是启用的架构节点")
    @RequestMapping(value = "/validateIsOpened.do")
    @ResponseBody
    public Json validateIsOpened(String id){
        try {
            Boolean resultDTO = this.mSysEnterpriseOrgService.validateIsOpened(id);
            //如果为true则返回成功。代表已经启用
            if(resultDTO){
                return Json.getInst().fail();
            }else{
                //代表禁用
                return Json.getInst().success();
            }
        } catch (Exception e) {
            return Json.getInst().fail();
        }
    }

其中Json是封装的返回数据类

package com.ws.sys.vo;

import lombok.Data;

import java.io.Serializable;

@Data
public class Json implements Serializable {
    //默认未失败状态
    private static Json instance;
    private String msg = "接口访问失败";
    private String title = "失败提示";
    private boolean status = false;
    private int code = 300;
    private Object data = null;

    public synchronized static Json getInst() {
        if(instance==null){
            instance = new Json();
        }
        return instance;
    }

    public Json() {
        super();
    }

    public Json success(Object data){
        this.title = "成功提示";
        this.msg = "接口访问成功";
        this.status = true;
        this.code = 200;
        this.data = data;
        return this;
    }

    public Json success(){
        this.title = "成功提示";
        this.msg = "接口访问成功";
        this.status = true;
        this.code = 200;
        this.data = null;
        return this;
    }

    public Json fail(Object data){
        this.title = "失败提示";
        this.msg = "接口访问失败";
        this.status = false;
        this.code = 300;
        this.data = data;
        return this;
    }

    public Json fail(){
        this.title = "失败提示";
        this.msg = "接口访问失败";
        this.status = false;
        this.code = 300;
        this.data = null;
        return this;
    }
}

效果

点击按钮，成功将参数传递到后台。

后台处理完之后返回给前端，前端判断显示