前几天用vue-resource调用接口,用post方式给后端,发现后端php接受不到数据,这好奇怪,最后发现提交给后端的时候 需要加一个参数

就是:emulateJSON : true 这句话的意思是 将request body以application/x-www-form-urlencoded content type发送

上个小demo看下

       _this.$http.post('/apiwx2/xqsj.php',
{
'token' : _this.token,
'house' : _this.userName,
},
{emulateJSON : true}
).then((response) => {
let ret = (new Function("return " + response.data))();
if(ret.code == 1){
_this.showSuccess = true;
}else if(ret.code == 3){
_this.showError = true;
}else{
_this.tips(ret.msg);
}
})
.catch(function (response) {
console.log(response)
})

如果后端给你的数据 response.data 得不到 那就是后端给你的是字符串,需要你转成json即可,转的方式最好用原声的写

这样即可 let ret = (new Function("return " + response.data))();

console.log(ret.code)  //输出 1 的成功码

最后附上所以方法

vue-resource 提供的便捷方法:

  • get(url, [data], [options]);

  • post(url, [data], [options]);

  • put(url, [data], [options]);

  • patch(url, [data], [options]);

  • delete(url, [data], [options]);

  • jsonp(url, [data], [options]);

都是接受三个参数:

  • url(字符串),请求地址。可被options对象中url属性覆盖。

  • data(可选,字符串或对象),要发送的数据,可被options对象中的data属性覆盖。

  • options

请求选项对象

option对象的各属性及含义

参数 类型 描述
url string 请求的URL
method string 请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法
body Object,FormDatastring request body
params Object 请求的URL参数对象
headers Object request header
timeout number 单位为毫秒的请求超时时间 (0 表示无超时时间)
before function(request) 请求发送前的处理函数,类似于jQuery的beforeSend函数
progress function(event) ProgressEvent回调处理函数
credientials boolean 表示跨域请求时是否需要使用凭证
emulateHTTP boolean 发送PUT, PATCH, DELETE请求时以HTTP
emulateJSON boolean 将request body以application/x-www-form-urlencoded content type发送

url

url(字符串)请求的URL地址

method

method(字符串)默认值为GET,请求的HTTP方法(GET,POST等)

data

data(对象或字符串)
默认值为:'',需要发送给服务端的数据。
data属性的值对method为POST,PUT,DElETE等请求会作为请求体来传送,对于GET,JSONP等方式的请求将会拼接在URL查询参数中。

params

params(对象)
默认值为:{}用来替换url中的模板变量,模板变量中为匹配到的属性添加在URL地址后边作为查询参数。

Vue.http({
url: 'http://example.com/{book}',
params: {
book: 'vue',
cat: 1
}
});

最终url为: http//example.com/vue?cat=1

headers

headers(对象)
默认值为:{},设置HTTP请求头

xhr

xhr(对象)默认值为null,该对象中属性都会应用到原生的xhr实例对象上。

upload

upload(对象)默认值为null,该对象的属性都会应用到原生的xhr实例对象的upload属性上。

jsonp

jsonp(字符串)
默认值为:callback,JSONP请求中回调函数的名字。

Vue.http({
url: 'http://example.com/book',
method: 'JSONP',
jsonp: 'cb'
});

最终的URL地址为http://example.com/book?cb=xxx
xxx 为 vue-resource 生成的随机串。

tiemout

timeout(数值)
默认为:0,单位为 ms。表示请求超时时间。0表示没有超时限制。超市后,将会取消当前请求。
vue-resrouce内部通过拦截器注入超时取消逻辑。

if ( request.timeout ) {
timeout = setTimeout(function () {
reqest.cancel();
}, request.timeout);
}
// 超时后,Promise会被 reject,错误回调会被执行。

beforeSend

beforeSend(函数)默认值为:null,该函数接受请求选项对象作为参数。该函数在发送请求之前执行,vue-resource内部在拦截器最前端调用该方法。

emulateHTTP

emulateHTTP(布尔值)
默认值为:false,当值为true是,用HTTP的POST方式PUT,PATCH,DELETE等请求,并设置请求头字段HTTP_Method_Override为原始请求方法。

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求,你可以启用enulateHTTP现象。启用该选项后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

如果服务器无法处理PUT,PATCH和DELETE的请求。可以启用enulateHTTP。
启用之后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实例的HTTP方法

Vue.http.options.emulateHTTP = true;

emulateJSON

emulateJSON(布尔值)
默认值为:false,当值为true并且data为对象时,设置请求头Content-Type的值为application/x-www-form-urlencoded

如果服务器无法处理编码为application/json的请求,可以启用emulateJSON选项。启用之后,请求会以application/x-www-form-urlencoded为MIME type,就像普通的HTML表单一样。

Vue.http.options.emulateJSON = true;

crossOrigin

crossOrigin(布尔值)

默认值为:null,表示是否跨域,如果没有设置该属性,vue-resource内部会判断浏览器当前URL和请求URL是否跨域。

if ( request.crossOrgin === null ) {
request.corssOrigin = corssOrigin(request);
}
if ( request.corssOrigin ) {
if ( !xhrCors ) {
request.client = xdrClient;
}
request.enumlateHTTP = false;
}

如果最终crossOrigin为true并且浏览器不支持CORS,即不支持XMLHttpRequest2时,则会使用XDomainRequest来请求。目前XDomainRequest 只有IE8,IE9 浏览器支持用来进行AJAX跨域。

reqponse对象

response对象包含服务端的数据,以及HTTP响应状态,响应头等信心。

  • data (对象或字符串): 服务端返回的数据,已使用 JSON.parse 解析。

  • ok(布尔值):当HTTP响应状态码在200~299区间时该值为true,表示响应成功。

  • status(数值): HTTP响应状态码。

  • statusText(字符串): HTTP响应状态文本描述。

  • headers(函数): 获取HTTP响应头信息,不传参表示获取整个响应头,返回一个相应头对象。传参表示获取对应的响应头信息。

  • request(对象)

RESTful调用

RESTful调用就是客户端通过HTTP动词来表示增,删,改,查实现对服务端数据操作的一种架构模式。

vue-resource提供全局调用Vue.resource或者在组件实例上调用this.$rsource

resource(url ,[params], [actions], [options]);

url

url(字符串)请求地址,可以包含占位符,会被parms对象中的同名属性的值替换。

this.$resource('/books/{cat}', { cat: 1 });
// 解析的URL为:/books/1

params

params(可选,对象)

参数对象,可用来提供url中的占位符,多出来的属性拼接url的查询参数。

actions

actions(可选,对象)

可以用来对已有的action进行配置,也可以用来定义新的action。

默认的aciton配置为:

Resource.actions = {
get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'delete'},
delete: {method: 'DELETE'}
}

修改默认值action配置

this.$resource(
'/books/{cat}',
{
cat: 1
}, {
charge: {
method: 'POST',
params: {
charge: true
}
}
});

actions对象中的单个action如charge对象可以包含options中的所有属性,且有限即高于iotions对象

options

options(可选,对象)


resource方法执行后返回一个包含了所有action方法名的对象。其包含自定义的action方法

resource请求数据

var resouce = this.$resource('/books/{id}');
// 查询
// 第一个参数为params对象,优先级高于resource发方法的params参数 resoure.get({id: 1}).then(function ( response ) {
this.$set('item', response.item);
}); // 保存 // 第二个参数为要发送的数据
resource.seve({id: 1}, {item: this.item}).then(function () {
// 请求成功回调
}, function () {
// 请求失败回调
}); resource.delete({id: 1}).then(function () {
// 请求成功回调
}, function () {
// 请求失败回调
});

拦截器

可以全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。

拦截器的注册

Vue.http.interceptors.push({
request: function ( request ) {
// 更改请求类型为POST
request.method = 'POST';
return request;
},
response: function ( response ) {
// 修改返回数据
response.data = [{
custom: 'custom'
}];
return response;
}
});

工厂函数注册

Vue.http.interceptors.push(function () {
return {
request: function ( request ) {
return request;
},
response: function ( response ) {
return response;
}
}
});

Vue.http.interceptors.push(function ( request, next ) {
// 请求发送前的处理逻辑 next(function () {
// 请求发送后的处理逻辑
// 更具请求的状态, response参数会返回给 successCallback或errorCallback
return response
}); });

实现的功能:

  • AJAX请求的loading界面

Vue.http.interceptors.push((request, next) => {
// 通过控制 组件的`v-show`值显示loading组件
loading.show = true;
next((response) => {
loading.show = false
return response
});
});
  • 请求失败时的提示对话框

跨域AJAX

vue-resource中用到的CORS特性,和 XHMLHttpRequest2的替代品 XDomainRequest

XDomain只支持GET和POST两种请求。如果要在vue-resource中使用其它方法请求,设置请求选项的emulateHTTP为true。

XHMLHttpRequest2 CORS

XHMLHttpRequest2提交AJAX请求还是和普通的XMLHttpRequset请求一样,只是增加了一些新特性。

在提交AJAX跨域请求时,需要知道当前浏览器是支持XHMLHttpRequest2, 判断方法使用 in操作符检测当前 XMLHttpRequest实例对象是否包含 withCredentials属性,如果包含则支持CORS

var xhrCors = 'withCredentials' in new XMLHttpRequest();

在支持CORS的情况下,还需啊哟服务端启用CORS支持。

例如:
需要从http://example.com:8080提交到http://example.com/8088,需要在http://example.com添加响应头

Access-Control-Allow-Origin: *

XDomainRequest

如果vue0resource不支持XMLHttpRequest2,则会降级使用用XDomainRequest

Promise

vue.resource基本HTTP调用和RESTful调用action方法执行后都会返回一个Promise对象。该Promise对象提供了then,catch,finally。

var promise - this.$http.post(
'http://example.com/book/cretae',
// 请求体中要发送给服务端数据
{
cat: '1',
name: 'newBook'
}, {
headers: {
'Content-Type': 'x-www-form-urlencoded'
}
}
); promise.then(function ( response ) {
// 成功回调
}, function ( response ) {
// 失败回调
}); promise.catch(function ( response ) {
// 失败回调
}); promise.finally(function () {
// 执行完成或者失败回调后都会执行此逻辑。
}); // 所有回调函数的this都指向组件实例

url模板

vue-resource 使用url-template库来解析url模板.

在vue-resourece方法请求传参时 可以在url中放置花括号包围的占位符。vue-resouce内部会使用url0template将占位符用params对象中的属性进行替换。

question

如何发送JSONP请求

vue-resouce提供三种调用方式进行跨域

全局方法

Vue.http({
url: 'http://example.com/books',
// 参数部分,将会拼接在url之后
params: {
cat: 1
},
method: 'JSONP'
})
.then(function ( response ){ }, function () {
//error });

实例底层方法

http.$http({
url: 'http://example.com/books',
params: {
cat: 1
},
method: 'JSONP'
})
.then(function () {
// this 指向当前组件实例
}, function () { });

实例便捷方法

this.$http.jsonp(
'http://www.example.com/books',
{
cat: 1
}
)
.then(function () { }, function () { });

修改数据类型

如何修改发送给服务端的数据类型

在默认情况下,对于PUT,PSOT,PATCH,DELETE等请求,请求头中的Content-Typeappliaction/json即JSON类型。有时候需要将数据提交为指定类型如application/x-www-form-urlencoded,multipart/form-data,txt/plain等。

全局headers配置

Vue.http.heaers.post['Content-Type'] = 'application/x-www-form-urlencoded'

实例配置

 
this.$http.post(
'http://example.com/books',
// 成功回调
function ( data, status, request ) {
if ( status == 200 ) {
consl.dir(data);
}
},
// 配置请求头
headres: {
'Content-Type': 'multipart/form-data'
}
);
// 实例配置的优先级高于全局配置

vue-resource获取不了数据,和ajax的区别,及vue-resource用法的更多相关文章

  1. 学习笔记-vue.js获取file文件数据

    在vue中file不能像其他input一样使用 v-model 双向数据绑定,因为文件选择是只读,只能用onchange监控值得变化. 所有需要使用v-on:change去监控. 例1: <in ...

  2. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  3. vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

    vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...

  4. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  5. MVC——应用Ajax获取不到数据问题解答

    当我们使用控制器利用Ajax获取表单数据时,调试为null,这时看看你接受表单时定义的参数名字是否为action 其实不能起这个名字的,这个名字和控制器关键字冲突了 随便换个其它名字就好了,比如我起个 ...

  6. $.ajax获取不到数据问题解决

    $("#updateflow").click(function () { $.ajaxSetup({ contentType: "application/json;cha ...

  7. ajax post data 获取不到数据,注意 content-type的设置

    ajax post  data  获取不到数据,注意 content-type的设置 .post/get关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的.好吧今天我也遇到了,网 ...

  8. Ajax从服务器端获取数据---原生态Ajax

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  9. contentType设置类型导致ajax post data 获取不到数据

    ajax post  data  获取不到数据,注意 content-type的设置 .post/get关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的. 好吧今天我也遇到了, ...

随机推荐

  1. java.lang.System.setProperty()方法实例

    java.lang.System.setProperty() 方法设置指定键指定的系统属性. 声明 以下是java.lang.System.setProperty()方法的声明 public stat ...

  2. underscore.js源码研究(8)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  3. css3的帧动画

    概述 前几天刚好看到一个用了CSS3帧动画的页面,对它非常感兴趣,就研究了一下,记录在下面,供以后开发时参考,相信对其他人也有用. PS:以后别人问我用过什么CSS3属性的时候,我也可以不用说常见的a ...

  4. ArrayList的源码分析

    在项目中经常会用到list集合来存储数据,而其中ArrayList是用的最多的的一个集合,这篇博文主要简单介绍ArrayList的源码分析,基于JDK1.7: 这里主要介绍 集合 的属性,构造器,和方 ...

  5. Postgres 的 Range 类型

    mysql 不支持 Range 类型 零.介绍 1. 适用场景: a.可以用于实现 是否满足薪资需求 的功能 b.可以用于实现 是否符合上线时间 的功能 一.定义 1.类型范围 Postgres Se ...

  6. 01-01java概述 doc命令、jdk\jre下载安装、path、classpath配置、开发中常见小问题

    1:计算机概述(了解) (1)计算机 (2)计算机硬件 (3)计算机软件 系统软件:window,linux,mac 应用软件:qq,yy,飞秋 (4)软件开发(理解) 软件:是由数据和指令组成的.( ...

  7. Java动态代理总结

    在之前的代码调用阶段,我们用action调用service的方法实现业务即可. 由于之前在service中实现的业务可能不能够满足当先客户的要求,需要我们重新修改service中的方法,但是servi ...

  8. tensorflow进阶篇-5(反向传播1)

    这里将讲解tensorflow是如何通过计算图来更新变量和最小化损失函数来反向传播误差的:这步将通过声明优化函数来实现.一旦声明好优化函数,tensorflow将通过它在所有的计算图中解决反向传播的项 ...

  9. CentOS 部署 Python3 的一些注意事项

    环境:centos6.7https://github.com/vinta/awesome-pythonhttps://github.com/PyMySQL/PyMySQLhttps://github. ...

  10. Hadoop2源码分析-准备篇

    1.概述 我们已经能够搭建一个高可用的Hadoop平台了,也熟悉并掌握了一个项目在Hadoop平台下的开发流程,基于Hadoop的一些套件我们也能够使用,并且能利用这些套件进行一些任务的开发.在Had ...