如题。通过这个错误,初学者能学到很多知识。
今天又同事用 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.js在vue应用中发起get post 等请求
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
vue-resource提供了多种方式来发起请求,包括使用Vue.http或this.$http来发送GET、POST等类型的请求,还提供了拦截器(interceptor)功能,可以在请求前后附加一些行为,例如显示加载指示器。它还支持RESTful风格的API...
npm install 引入vue-resource包 this.$http.get(’/someUrl’) this.$http.post(’/someUrl’,{foo:‘bar’}) (1) npm install vue-resource –save引入vue-resource包 (2)在store文件的main.js中配置vue-resource ...
该本为1.5.1,实现vue的交互,支持get/post/jsonp.....
可以使用这个vue-resource.js在vue应用中发起get或者 post 等请求
公司最近用vue写前端,用vue-resource遇到的一些问题,现在记录下来。 vue-resource post数据 this.$http.post('/someUrl',data, [options]).then(function(response){ // 响应成功回调 }, function(response){ ...