Vue.js Ajax(vue-resource)

Vue 要实现异步加载需要使用到 vue-resource 库。

  1. <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

Get 请求

以下是一个简单的 Get 请求实例,请求地址是一个简单的 txt 文本:

实例

  1. window.onload = function(){
  2. var vm = new Vue({
  3. el:'#box',
  4. data:{
  5. msg:'Hello World!',
  6. },
  7. methods:{
  8. get:function(){
  9. //发送get请求
  10. this.$http.get('/ajax/demo.txt').then(function(res){
  11. document.write(res.body);
  12. },function(){
  13. console.log('请求失败处理');
  14. });
  15. }
  16. }
  17. });
  18. }

demo.txt内容如下:

  1. vue.js 教程学习
  2. Vue 学习起来非常简单

如果需要传递数据,可以使用 this.$http.get('get.php',{params : jsonData}) 格式,第二个参数 jsonData 就是传到后端的数据。

  1. this.$http.get('get.php',{params : {a:1,b:2}}).then(function(res){
  2. document.write(res.body);
  3. },function(res){
  4. console.log(res.status);
  5. });

post 请求

post 发送数据到后端,需要第三个参数 {emulateJSON:true}

emulateJSON 的作用: 如果Web服务器无法处理编码为 application/json 的请求,你可以启用 emulateJSON 选项。

实例

  1. window.onload = function(){
  2. var vm = new Vue({
  3. el:'#box',
  4. data:{
  5. msg:'Hello World!',
  6. },
  7. methods:{
  8. post:function(){
  9. //发送 post 请求
  10. this.$http.post('/ajax/demo.php',{name:"vue.js教程",url:"https://www.jishuchi.com"},{emulateJSON:true}).then(function(res){
  11. document.write(res.body);
  12. },function(res){
  13. console.log(res.status);
  14. });
  15. }
  16. }
  17. });
  18. }

demo.php代码如下:

  1. <?php
  2. $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
  3. $city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
  4. echo '网站名: ' . $name;
  5. echo "\n";
  6. echo 'URL 地址: ' .$city;
  7. ?>

语法 & API

你可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求。

  1. // 基于全局Vue对象使用http
  2. Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
  3. Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
  4. // 在一个Vue实例内使用$http
  5. this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
  6. this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

vue-resource 提供了 7 种请求 API(REST 风格):

  1. get(url, [options])
  2. head(url, [options])
  3. delete(url, [options])
  4. jsonp(url, [options])
  5. post(url, [body], [options])
  6. put(url, [body], [options])
  7. patch(url, [body], [options])

除了 jsonp 以外,另外 6 种的 API 名称是标准的 HTTP 方法。

options 参数说明:

参数类型描述
urlstring请求的目标URL
bodyObject, FormData, string作为请求体发送的数据
headersObject作为请求头部发送的头部对象
paramsObject作为URL参数的参数对象
methodstringHTTP方法 (例如GET,POST,…)
timeoutnumber请求超时(单位:毫秒) (0表示永不超时)
beforefunction(request)在请求发送之前修改请求的回调函数
progressfunction(event)用于处理上传进度的回调函数 ProgressEvent
credentialsboolean是否需要出示用于跨站点请求的凭据
emulateHTTPboolean是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT,PATCH和DELETE请求。
emulateJSONboolean设置请求体的类型为application/x-www-form-urlencoded

通过如下属性和方法处理一个请求获取到的响应对象:

属性类型描述
urlstring响应的 URL 源
bodyObject, Blob, string响应体数据
headersHeader请求头部对象
okboolean当 HTTP 响应码为 200 到 299 之间的数值时该值为 true
statusnumberHTTP 响应码
statusTextstringHTTP 响应状态
方法类型描述
text()约定值以字符串方式返回响应体
json()约定值以格式化后的 json 对象方式返回响应体
blob()约定值以二进制 Blob 对象方式返回响应体