SpringBoot+SweeAlert实现alert提示与前后端数据交互

场景

效果

点击某条记录，点击禁用按钮，会提示确定。

点击确认后，后将当前记录的id传递到后台，后台将其状态改变，从而实现前后端交互。

实现

SweetAlert2官方文档：

https://sweetalert2.github.io/

将相关资源进行下载

 

如果没法下载资源可以从这里下载：

https://download.csdn.net/download/badao_liumang_qizhi/11226925

html页面代码

在页面中引入上面所需的资源文件以及jquery之外

 禁用

js代码

//禁用操作
function orgClose() {
    Swal.fire({
        title: '确定禁用吗?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#23c6c8',
        cancelButtonColor: '#d33',
        cancelButtonText:'取消',
        confirmButtonText: '确定'
    }).then((result) => {
        if (result.value) {
        var ref = $('#org_tree').jstree(true),
            sel = ref.get_selected();
        if(!sel.length) {
            swal({
                type: 'error',
                title: '错误提示',
                text: '请选择一个架构！'
            })
            return false;
        }
        sel = sel[0];
        var url = '/sysEnterpriseOrg/doOrgClose.do';
        var data = {"id":sel};
        $.post(url,data).done(function (res) {
            if(res.status){
                initJsTree();
                Swal.fire(
                    '禁用成功!',
                    res.data,
                    'success'
                )
            }else{
                Swal.fire(
                    '异常提示',
                    '执行禁用操作失败',
                    'error'
                )
            }
        }).fail(function (err) {
            Swal.fire(
                '异常提示',
                '数据禁用失败',
                'error'
            )
        });
    }
})
}

其中：

Swal.fire({
        title: '确定禁用吗?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#23c6c8',
        cancelButtonColor: '#d33',
        cancelButtonText:'取消',
        confirmButtonText: '确定'
    })

是sweetalert2的alert框的语法。

然后.then后面的内容是点击确认按钮之后执行的操作。

 swal({
                type: 'error',
                title: '错误提示',
                text: '请选择一个架构！'
            })

是sweetalert的使用语法，如果要使用的话也要引入相关的资源。

sweetalert官网：

https://sweetalert.bootcss.com/docs/

然后

 var ref = $('#org_tree').jstree(true),
 sel = ref.get_selected();

此部分是获取选中记录的id属性值，这段获取要结合自己的具体业务来实现。

之后

 $.post(url,data).done(function (res) {

以下的部分是发送post请求与后台，传递的数据通过：

 var data = {"id":sel};

来封装。

然后根据后台响应的状态进行相应的提示。

.done(function (res) {
            if(res.status){

后台代码

 

@Description("禁用")
    @RequestMapping(value = "/doOrgClose.do")
    @ResponseBody
    public Json OrgClose(String id){
        try {
            ResultDTO resultDTO = this.mSysEnterpriseOrgService.doOrgClose(id);
            return Json.getInst().success(resultDTO.getData());
        } catch (Exception e) {
            return Json.getInst().fail();
        }
    }

后台直接通过方法参数接受穿过来的id值。

其中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;
    }
}

ResultDto是封装的查询结果类：

package com.ws.sys.dto;


import lombok.Data;

import java.io.Serializable;

@Data
public class ResultDTO implements Serializable{

    //默认未失败状态
    private static ResultDTO instance;
    private String msg = "数据返回失败";
    private boolean status = false;
    private Object data = null;

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

    public ResultDTO() {
        super();
    }

    public ResultDTO success(Object data){
        this.msg = "数据返回成功";
        this.status = true;
        this.data = data;
        return this;
    }

    public ResultDTO success(){
        this.msg = "数据返回成功";
        this.status = true;
        this.data = null;
        return this;
    }

    public ResultDTO fail(Object data){
        this.msg = "数据返回失败";
        this.status = false;
        this.data = data;
        return this;
    }

    public ResultDTO fail(){
        this.msg = "数据返回失败";
        this.status = false;
        this.data = null;
        return this;
    }

}

具体serviceImpl实现代码

 @Override
    public ResultDTO doOrgClose(String id) {
        SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(id);
        sysEnterpriseOrg.setOpened(0);
        boolean flag = this.updateById(sysEnterpriseOrg);
        return flag?ResultDTO.getInst().success():ResultDTO.getInst().fail();
    }

效果