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

效果

相关推荐
天若有情6731 天前
独立开发复盘:我用 Node.js 做了个在线工具箱
前端·json·工具
Asurplus2 天前
【SpringBoot4】3、从SpringBoot4升级Sa-Token1.46.0报错
redis·sa-token·json·jackson·springboot4
代码中介商2 天前
C++ 预约系统实战(三):服务端实现——libevent 事件驱动与业务路由
c++·json·c/s
wcy03102 天前
POST为什么会发送两次请求
javascript·ajax
譕痕3 天前
notepad++安装插件 可视化展示 json串内容
json·intellij-idea
databook3 天前
DuckDB + SQL 高效分析 JSON 数据
数据分析·json·nosql
刺客码4 天前
Layui 表格固定列行高错位问题解决方案
前端框架·layui·jquery·web
数据狐(Datafox)4 天前
1688商品列表API接口解析(附 JSON 样例)
java·开发语言·数据库·爬虫·json
j7~5 天前
【Linux网络加餐】(篇六)网络版计算器(上):模板方法模式、序列化与 JSON
linux·c++·json·序列化·反序列化·网络版计算机
梦帮科技5 天前
Next.js 16 模块化单体实战:App Router、领域模块与 Route Handler 分层
css·数据结构·链表·正则表达式·node.js·json·html5