Vue.js Ajax(vue-resource)
原创Vue.js Ajax(vue-resource)
原创
Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Get 请求
以下是一个简单的 Get 请求实例，请求地址是一个简单的 txt 文本：
实例
如果需要传递数据，可以使用 this.$http.get('get.php',{params : jsonData}) 格式，第二个参数 jsonData 就是传到后端的数据。
post 请求
post 发送数据到后端，需要第三个参数 {emulateJSON:true}。
emulateJSON 的作用： 如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。
demo_test_post.php 代码如下：
语法 & API
你可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求。
vue-resource 提供了 7 种请求 API(REST 风格)：
除了 jsonp 以外，另外 6 种的 API 名称是标准的 HTTP 方法。
options 参数说明:
参数 | 类型 | 描述 |
|---|---|---|
url | string | 请求的目标URL |
body | Object, FormData, string | 作为请求体发送的数据 |
headers | Object | 作为请求头部发送的头部对象 |
params | Object | 作为URL参数的参数对象 |
method | string | HTTP方法 (例如GET，POST，...) |
timeout | number | 请求超时（单位：毫秒） (0表示永不超时) |
before | function(request) | 在请求发送之前修改请求的回调函数 |
progress | function(event) | 用于处理上传进度的回调函数 ProgressEvent |
credentials | boolean | 是否需要出示用于跨站点请求的凭据 |
emulateHTTP | boolean | 是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。 |
emulateJSON | boolean | 设置请求体的类型为application/x-www-form-urlencoded |
通过如下属性和方法处理一个请求获取到的响应对象：
属性 | 类型 | 描述 |
|---|---|---|
url | string | 响应的 URL 源 |
body | Object, Blob, string | 响应体数据 |
headers | Header | 请求头部对象 |
ok | boolean | 当 HTTP 响应码为 200 到 299 之间的数值时该值为 true |
status | number | HTTP 响应码 |
statusText | string | HTTP 响应状态 |
方法 | 类型 | 描述 |
text() | 约定值 | 以字符串方式返回响应体 |
json() | 约定值 | 以格式化后的 json 对象方式返回响应体 |
blob() | 约定值 | 以二进制 Blob 对象方式返回响应体 |
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
