場景

效果

點擊某條記錄，點擊禁用按鈕，會提示確定。

點擊確認后，后將當前記錄的id傳遞到后臺，后臺將其狀態改變，從而實現前后端交互。

實現

SweetAlert2官方文檔：

https://sweetalert2.github.io/

將相關資源進行下載

?

如果沒法下載資源可以從這里下載：

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

html頁面代碼

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

?<button class="btn btn-info " type="button" onclick="orgClose()"><i class="fa fa-trash-o"></i>禁用</button>

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")@ResponseBodypublic 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實現代碼

?@Overridepublic 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();}

效果

總結

以上是生活随笔為你收集整理的SpringBoot+SweeAlert实现alert提示与前后端数据交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。