Vue-resource实现ajax请求和跨域请求示例

vue-resource是Vue提供的体格http请求插件,如同jQuery里的$.ajax,用来和后端交互数据的。

在使用时,首先需要安装vue-resource插件

1.在项目跟目录上安装:

rush:bash;"> npm install vue-resource

2.引入resource插件

rush:js;"> import VueResource from 'vue-resource'; Vue.use(VueResource)

3.发送请求:

rush:js;"> this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.PHP").then(function(res){ console.log(res) })

ES6写法:

{ // 处理成功的结果},(res) => { // 处理失败的结果});

在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数

then方法的回调函数也有两种写法,第一种是传统的函数写法,第二种是更为简洁的ES 6的Lambda写法:

POST请求:

rush:js;"> this.$http.post("http://www.vrserver.applinzi.com/aixianfeng/apihome.PHP",{name:"abc"},{emulateJSON:true}).then( function (res) { // 处理成功的结果 alert(res.body); },function (res) { // 处理失败的结果 } );

JSONP请求:

rush:js;"> new Vue({ ready() { this.$http.jsonp('/url',{name:"abc"}) .then(function (res){ console.log(res) },function (res) { console.log(res) }); } })

吐槽一下,现在应该没有用到JSON的了吧,有的话真呵呵呵了。

支持的HTTP方法

vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:

  • get(url,[options])
  • head(url,[options])
  • delete(url,[options])
  • jsonp(url,[options])
  • post(url,[body],[options])
  • put(url,[options])
  • patch(url,[options])

除了jsonp以外,另外6种的API名称是标准的HTTP方法。当服务端使用REST API时,客户端的编码风格和服务端的编码风格近乎一致,这可以减少前端和后端开发人员的沟通成本。

客户端请求方法

options对象

发送请求时的options选项对象包含以下属性

服务端处理方法
方法,例如:'GET','POST'或其他HTTP方法arams函数,类似于jQuery的beforeSend函数函数

emulateHTTP的作用

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

rush:js;"> Vue.http.options.emulateHTTP = true;

emulateJSON的作用

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

rush:js;"> Vue.http.options.emulateJSON = true;

response对象

response对象包含以下属性

方法

属性属性为true

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...
类型 描述