解决vue-resource的post的问题

如题。通过这个错误，初学者能学到很多知识。

今天又同事用 vue-resource 搞了个post，后台用php，里面有获取参数tap。

$tap = $_REQUEST['tap'];

普通的jquery的ajax 的get和post都没有问题，但是vue-resource会导致php获取不到参数【上面那行代码报错的错误信息会连同报文一起返回到前端，导致前端获取到错误的json格式而解析出错】。分析请求头（谷歌浏览器的network里面看请求，小白自行百度搜如何看，很简单）发现 vue-resource是request payload，而jquery的是 form data。

自此定位为加请求头【如果不知道此方法的原因请百度搜 form data和request payload的区别，上面也介绍了，并且有关键字请求头（小白连请求头是什么都不知道也能通过这个关键字再自行百度一下）】

           var oMyForm = new FormData();
            oMyForm.append("tap", "holidayInfo");
            vm.$http.post(vm.url, oMyForm, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function (res) {
                console.log(res);
            });

就可以了。

不过中间还试过这个不行的也很有借鉴意义，顺便发出来给大家看看：

            vm.$http.post(vm.url, {"tap": "holidayInfo"}, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function (res) {
                console.log(res);
            });

这样请求头虽然是 form data，但数据却比jquery的方式多了个括号。

再分析jquery的代码会发现对于传入的data有个处理是 JQuery.param，一试，果然是它把 {"tap": "holidayInfo"} 转成 "tap"="holidayInfo" 的形式。

所以完美主义者可以自己写一个方法也这样转换一下，我这里为简单起见，直接用jquery提供的这个param方法了：

           vm.$http.post(vm.url, $.param({tap:'holidayInfo'}), {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function (res) {
                console.log(res);
            });

官网github上的介绍太过少了，作者不能这样啊，参数都不带说明让人很难用啊。

回来正打算改一下其源码，搜了找到一篇文章（百度里没源码），http://blog.csdn.net/qq_24122593/article/details/52954726 才发现可以通过配置 emulateJSON 参数来使请求头满足我们的要求：

vm.$http.post(url, {tap:'holidayInfo'}, {
    emulateJSON: true
}).then(function (res) {
    console.log(res);
});

我也是醉了，之前直接找如何设置 vue-resource的请求头、vue-resource配置、用法，半天没找到设置请求头的方法。现在找一个无关的“vue-resource源码解析"倒是找到了。

解决vue-resource的post的问题

猜你喜欢