Jquery中使用ajax传json参数并从SpringBoot后台Controller返回消息

场景

前端通过ajax提交json格式的数据,后台接受到实现具体的业务后

返回给前端消息提示。

实现

html页面代码

复制代码
 <button id="printBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 打印</button>

调用js部分代码

复制代码
//打印按钮点击事件
    $("#printBtn").click(function () {
        var data = t.rows(['.selected']).data()[0];
        if(undefined===data){
            swal({
                type: 'warning',
                title: '提示:',
                text: '请首选选择一行数据!',
                confirmButtonColor: "#1ab394",
            })
        }else{
            printCode(data.id);
        }
    });

ajax请求方法

复制代码
function printCode(id){
    debugger
    $.ajax({
        type: 'POST',
        url: "/wmsReceiveOrder/doPrintPostRequest",
        cache: false,  //禁用缓存
        data:JSON.stringify({"id":id}),
        contentType: "application/json",
        dataType: "json",
        success: function (result) {
            debugger
            alert(result.message)
        }
    })
    return false;
}

来到url所对应的后台Controller中的方法

复制代码
@ResponseBody
    @RequestMapping(value = "/doPrintPostRequest")
    public Map<String, Object> doPrintPostRequest(@RequestBody Map<String, Object> params) {
         Map<String, Object> result = new HashMap<String, Object>();
        Object PrintId = params.get("id");
        String paramID="";
        if(PrintId!=null){
           paramID=PrintId.toString();
        }
        result.put("statusCode",  "200");
        result.put("message", "参数是:"+ paramID);
        return result;
    }

效果

相关推荐
历程里程碑15 小时前
Protobuf vs JSON vs XML:小白该怎么选?
xml·大数据·数据结构·elasticsearch·链表·搜索引擎·json
Java成神之路-2 天前
SpringMVC 响应实战指南:页面、文本、JSON 返回全流程(Spring系列13)
java·spring·json
我命由我123452 天前
在 React 项目中,可以执行 npm start 命令,但是,无法执行 npm build 命令
前端·javascript·vue.js·react.js·前端框架·json·ecmascript
带刺的坐椅2 天前
RFC 9535:JSONPath 的标准化之路
java·json·jsonpath·snack4·rfc9535
孙同学20202 天前
如何将 JSON 数据转换为 Excel 工作表
python·json·excel
ID_180079054732 天前
除了 Python,还有哪些语言可以解析 JSON 数据?
开发语言·python·json
电商API&Tina3 天前
跨境电商如何接入1688官方寻源通接口?附接入流程
java·数据库·python·sql·oracle·json·php
3秒一个大3 天前
Cookie/Session vs JWT 双 Token:登录认证方案的演进与对比
前端·安全·ajax
华科易迅3 天前
Vue通过Ajax获取后台路由信息
vue.js·ajax·okhttp
神の愛4 天前
利用json-to-ts工具进行转换,放置在typeScript.ts文件中
javascript·typescript·json