场景

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") {debuggerswal({type: 'warning',title: '提示:',text: '已打印不能再提交！',confirmButtonColor: "#1ab394",})}else if(data.status.trim()==="2") {debuggerswal({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代替。执行提交的方法：

 function submitPrint(id){debugger$.ajax({type: 'POST',url: "/wmsReceiveOrder/doSubmit",cache: false,  //禁用缓存data:JSON.stringify({"id":""+id+""}),contentType: "application/json",dataType: "json",success: function (result) {debugger//alert(result.message)swal({type: 'warning',title: '提示:',text: result.message,confirmButtonColor: "#1ab394",}).then(function (isConfirm) {if (isConfirm.value === true) {//window.location.reload();debuggert.ajax.reload( null, false );}})}})return false;}

关键点是：

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

效果

点击提交按钮

点击OK之后

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

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

jquery ajax json传递数组,jQuery ajax 传递JSON数组到Spring Controller
jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...
ajax返回值中文变成问号,用ajax传递json到前台中文出现问号乱码问题的解决办法...
用ajax传递json到前台中文出现问号乱码问题的解决办法我使用的Springmvc,在controller层传输一个json到前台,后台显示没问题,中文正常显示而到了前台中文就变成了问号. 后来 ...
Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）
form表单文件上传上菜 file_put.html <form action="" method="post" enctype="multi ...
boke例子： freermarker：在使用ajax传递json数据的时候多出冒号
boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...
从一段字符串中提取JSON字符串并进行高亮格式化
需求:后台传过来一段字符串文本,需要从这段字符串中提取json字符串并在前台json格式化高亮显示 1.提取json字符串注:当字符串中没有出现json字符串时返回null; function ge ...
SpringBoot中使用thymeleaf时ajax请求不能回显消息
场景在SpringBoot项目中使用thymeleaf模板时,在js文件中使用ajax提交表单不能成功回显消息. 实现修改为 html中: <button id="parseBt ...
jQuery ajax 传递JSON数组到Spring Controller
jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...
前端ajax传递json格式参数，后端springboot接收
在做开发的过程中,前端ajax传参和后端springboot接收参数经常用到,之前老是把这些搞混,导致出现错误,也在网上查阅了很多资料,再根据自己的经验和测试,对这部分内容做了一些使用总结.后面会再慢 ...
SpringMVC绑定ajax传递json数据到pojo对象错误（400 Bad Request）
问题如标题所述,ajax向SpringMVC Controller传递JSON数据,遇到了错误"Failed to load resource: the server responded w ...

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

场景

实现

效果

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

最新文章

热门文章