[
Vue.js中，Vue 要实现异步加载需要使用到 vue-resource 库, 如下：
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
我们可以通过Vue.js的AJAX的get和post请求来了解。
Vue.js的AJAX的get请求
以下是一个简单的 Get 请求实例，请求地址是一个简单的 txt 文本：
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Vue 测试实例 – Break易站(breakyizhan.com)</title> <script src=”https://cdn.staticfile.org/vue/2.4.2/vue.min.js”></script> <script src=”https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js”></script> </head> <body> <div id=”box”> <input type=”button” @click=”get()” value=”点我异步获取数据(Get)”> </div> <script type = “text/javascript”> window.onload = function(){ var vm = new Vue({ el:‘#box‘, data:{ msg:‘Hello World!‘, }, methods:{ get:function(){ //发送get请求 //获取https://www.breakyizhan.com/robots.txt this.$http.get(‘https://cdn.breakyizhan.com/robots.txt‘).then(function(res){ document.write(res.body); },function(){ console.log(‘请求失败处理‘); }); } } }); } </script> </body> </html>
?????提示：可以修改代码后运行
Vue.js的AJAX的post请求
post 发送数据到后端，需要第三个参数?{emulateJSON:true}。
emulateJSON 的作用： 如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Vue 测试实例 – Break易站(breakyizhan.com)</title> <script src=”https://cdn.staticfile.org/vue/2.4.2/vue.min.js”></script> <script src=”https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js”></script> </head> <body> <div id=”box”> <input type=”button” @click=”post()” value=”点我异步获取数据(Post)”> </div> <script type = “text/javascript”> window.onload = function(){ var vm = new Vue({ el:‘#box‘, data:{ msg:‘Hello World!‘, }, methods:{ post:function(){ //发送 post 请求 this.$http.post(‘/tools/code/vue/ajax_post.php‘,{name:”Break易站”,url:”https://www.breakyizhan.com”},{emulateJSON:true}).then(function(res){ document.write(res.body); },function(res){ console.log(res.status); }); } } }); } </script> </body> </html>
?????提示：可以修改代码后运行
Vue.js的AJAX的语法&API
你可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求。
// 基于全局Vue对象使用http Vue.http.get(‘/someUrl‘, [options]).then(successCallback, errorCallback); Vue.http.post(‘/someUrl‘, [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get(‘/someUrl‘, [options]).then(successCallback, errorCallback); this.$http.post(‘/someUrl‘, [body], [options]).then(successCallback, errorCallback);
vue-resource 提供了 7 种请求 API(REST 风格)：
get(url, [options]) head(url, [options]) delete(url, [options]) jsonp(url, [options]) post(url, [body], [options]) put(url, [body], [options]) patch(url, [body], [options])
除了 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对象方式返回响应体 |
]
??本文标题：
Vue.js的AJAX – Break易站 转载请保留页面地址：https://www.breakyizhan.com/vue/6711.html