場(chǎng)景

效果

點(diǎn)擊某條記錄，點(diǎn)擊禁用按鈕，會(huì)提示確定。

點(diǎn)擊確認(rèn)后，后將當(dāng)前記錄的id傳遞到后臺(tái)，后臺(tái)將其狀態(tài)改變，從而實(shí)現(xiàn)前后端交互。

實(shí)現(xiàn)

SweetAlert2官方文檔：

https://sweetalert2.github.io/

將相關(guān)資源進(jìn)行下載

?

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

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: '錯(cuò)誤提示',text: '請(qǐng)選擇一個(gè)架構(gòu)！'})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('異常提示','執(zhí)行禁用操作失敗','error')}}).fail(function (err) {Swal.fire('異常提示','數(shù)據(jù)禁用失敗','error')});} }) }

其中：

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

是sweetalert2的alert框的語法。

然后.then后面的內(nèi)容是點(diǎn)擊確認(rèn)按鈕之后執(zhí)行的操作。

?swal({type: 'error',title: '錯(cuò)誤提示',text: '請(qǐng)選擇一個(gè)架構(gòu)！'})

是sweetalert的使用語法，如果要使用的話也要引入相關(guān)的資源。

sweetalert官網(wǎng)：

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

然后

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

此部分是獲取選中記錄的id屬性值，這段獲取要結(jié)合自己的具體業(yè)務(wù)來實(shí)現(xiàn)。

之后

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

以下的部分是發(fā)送post請(qǐng)求與后臺(tái)，傳遞的數(shù)據(jù)通過：

?var data = {"id":sel};

來封裝。

然后根據(jù)后臺(tái)響應(yīng)的狀態(tài)進(jìn)行相應(yīng)的提示。

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

后臺(tái)代碼

?

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

后臺(tái)直接通過方法參數(shù)接受穿過來的id值。

其中Json是封裝的返回?cái)?shù)據(jù)類

package com.ws.sys.vo;import lombok.Data;import java.io.Serializable;@Data public class Json implements Serializable {//默認(rèn)未失敗狀態(tài)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是封裝的查詢結(jié)果類：

package com.ws.sys.dto;import lombok.Data;import java.io.Serializable;@Data public class ResultDTO implements Serializable{//默認(rèn)未失敗狀態(tài)private static ResultDTO instance;private String msg = "數(shù)據(jù)返回失敗";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 = "數(shù)據(jù)返回成功";this.status = true;this.data = data;return this;}public ResultDTO success(){this.msg = "數(shù)據(jù)返回成功";this.status = true;this.data = null;return this;}public ResultDTO fail(Object data){this.msg = "數(shù)據(jù)返回失敗";this.status = false;this.data = data;return this;}public ResultDTO fail(){this.msg = "數(shù)據(jù)返回失敗";this.status = false;this.data = null;return this;}}

具體serviceImpl實(shí)現(xiàn)代碼

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

效果

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。