【vue】ajax后台map接收不到前台的值，请求参数以request payload传递解决办法

最新推荐文章于 2025-09-08 13:00:00 发布

原创最新推荐文章于 2025-09-08 13:00:00 发布 · 4.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

杂七杂八专栏收录该内容

85 篇文章

订阅专栏

本文介绍了一个关于Vue-post给后台传值时遇到的问题：后台无法接收到参数。问题原因是vue-resource默认以requestpayload形式发送数据。文章提供了解决方案，包括引入qs.js库并使用Qs.stringify()进行格式化，同时设置请求头为application/x-www-form-urlencoded。

1、用vue post给后台传值时，发现

@RequestParam Map<String, Object> params

中params接收不到值

控制台查看，发现参数是request payload方式传递的。

查资料显示

vue-resource中post请求时的一个坑，vue-resource中post发送的数据默认以request payload的形式。

2、解决办法

下载qs.js文件，下载地址点这里

（1）页面引用

<script src="${rc.contextPath}/statics/libs/qs.min.js"></script>

（2）

new Vue(）之前，写入以下代码

Vue.use({
    install(Vue) {
        Object.defineProperty(Vue.prototype, "$qs", {
            writable: false,
            value: window.Qs
        });
    }
});

（3）ajax传递的值用 Qs.stringify（）格式化

var params = {};
params['Id']=Id;
params = Qs.stringify(params);

（4）ajax调用时，设置请求头

$.ajax({
    url : '../app/list',
    beforeSend: function(request) {      //使用beforeSend
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    },
    dataType: 'json',
    type : 'POST',
    async: true,
    data: params,
    success : function(r) {
        if ("200" == r.status) {
        }
        else {
        } /// else
    }, /// success
    error: function (e) {
    }
}); /// ajax