SpringBoot加Jquery实现ajax传递json字符串并回显消息（已实践）

素颜马尾好姑娘i 2023-10-18 16:17 47阅读 0赞

## 场景 ##

inspinia 前端页面模板+thymeleaf模板+jquery+springboot

点击提交将当前选中行的id以json字符串传到后台，后台实现状态更改并刷新表格。

## 实现 ##

提交按钮的点击事件：

//提交按钮点击事件
        $("#submitBtn").click(function () {
            var data = t.rows(['.selected']).data()[0];
            if(undefined===data){
                swal({
                    type: 'warning',
                    title: '提示:',
                    text: '请首先选择一行数据！',
                    confirmButtonColor: "#1ab394",
                })
            } else if(data.status.trim()==="3") {
                debugger
                swal({
                    type: 'warning',
                    title: '提示:',
                    text: '已打印不能再提交！',
                    confirmButtonColor: "#1ab394",
                })
            }else if(data.status.trim()==="2") {
                debugger
                swal({
                    type: 'warning',
                    title: '提示:',
                    text: '已提交不用再提交！',
                    confirmButtonColor: "#1ab394",
                })
            }else{
                submitPrint(data.id);
            }
    
        });

其中：

var data = t.rows(['.selected']).data()[0];

是datatables自带的获取选中行，通过data.id将ID传递给执行提价的方法。

swal({
                    type: 'warning',
                    title: '提示:',
                    text: '已提交不用再提交！',
                    confirmButtonColor: "#1ab394",
                })

是前端模板自带的提示方法，可以使用alert代替。执行提交的方法：

关键点是：

data:JSON.stringify({"id":""+id+""}),
    
    contentType: "application/json",
    
    dataType: "json",

前端传递都是string格式的键值对，那么在后台就要使用

@RequestBody Map<String, String> params

来接收

后台Controller部分

@Description("提交功能实现")
        @ResponseBody
        @RequestMapping(value = "/doSubmit")
        public Map<String, String> doSubmit(@RequestBody Map<String, String> params) {
            Map<String, String> result = new HashMap<String, String>();
            String PrintId = params.get("id").toString();
            Long paramID=0L;
            if(PrintId!=null){
                paramID=Long.parseLong(PrintId);
            }
            WmsReceiveOrder wmsReceiveOrder =new WmsReceiveOrder();
            wmsReceiveOrder.setId(paramID);
            wmsReceiveOrder.setStatus("2");
            receiveOrderService.updateById(wmsReceiveOrder);
            result.put("statusCode",  "200");
            result.put("message", "提交成功");
            return result;
        }

##    效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

点击提交按钮

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

点击OK之后

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

表格自动刷新变为已提交。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190328165512867.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190328165517521.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190328165519993.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70