vue.js_07_vue-resource的请求方式
1.vue-resource 实现 get, post, jsonp请求
<body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="jsonp请求" @click="jsonpInfo">
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() { // 发起get请求
// 当发起get请求之后， 通过 .then 来设置成功的回调函数
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result) {
// 通过 result.body 拿到服务器返回的成功的数据
// console.log(result.body)
})
},
postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, {
emulateJSON: true
}).then(result => {
console.log(result.body)
})
},
jsonpInfo() { // 发起JSONP 请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
}
});
</script>
</body>
2.请求中的注意事项
1>配置全局的,请求数据接口,所有的相对路径的请求都会加上该地址
//配置全局的,请求数据接口,所有的相对路劲的请求都加上'http://vue.studypr.io/api/'
//相对路径 请求url前面没有加/
Vue.http.options.root='http://vue.studypr.io/api/';
2>全局启用 emulateJSON请求方式
如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为Content-Type，就像普通的HTML表单一样。
Vue.http.options.emulateJSON=true
3>vue-resource 实现 get, post, jsonp请求,的返回值
以post请求添加商品为例子：
this.$http.post('add', {name: this.name}, {emulateJSON: true}).then(result => {//url='http://vue.studypr.io/api/add'
if(result.body.start === 0) {
//成功 重新获取所有的数据
this.getAllList()
} else {
alert('添加失败')
}
})
vue.js_07_vue-resource的请求方式的更多相关文章
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- http状态码+http请求方式
一.http状态码 2开头 (请求成功)表示成功处理了请求的状态代码. 200 (成功) 服务器已成功处理了请求. 通常,这表示服务器提供了请求的网页. 201 (已创建) 请求成功并且服 ...
- java、ajax 跨域请求解决方案（'Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.）
1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...
- axios的数据请求方式及跨域
express 的三大功能:静态资源.路由.模板引擎 app.use(express.static('www')); 只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问 数据的请 ...
- leyou_04_vue.js的ajax请求方式
1.异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery.但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分.因此不可能为了发起ajax请求而去引用这么大的 ...
- 限制action所接受的请求方式或请求参数
原文:http://www.cnblogs.com/liukemng/p/3726897.html 2.限制action所接受的请求方式(get或post): 之前我们在HelloWorldContr ...
- Android——JDK的get请求方式
layout文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...
- 第二节（RequestMapping请求方式）学习尚硅谷-springmvc视频教程
项目中,创建测试类SpringMVCTest @Controller @RequestMapping("/springmvc1") public class SpringMVCTe ...
- jQuery中ajax的4种常用请求方式
jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...
随机推荐
- shiro框架的组成和内部结构(下一篇为spring整合shiro)
1.shiro简介 Apache Shiro是Java的一个安全框架.功能强大,使用简单的Java安全框架,它为开发人员提供一个直观而全面的认证,授权,加密及会话管理的解决方案. 实际上,Shir ...
- csv文件格式
弱渣今天第一次读Kaggle入门文章,知道train data,test data以及提供的result文件大都是以csv文件格式给出的. csv,全称 Comma-Separated Values, ...
- C#实现拍照并且存水印照片
由于一直在高校工作,就涉及到招生工作,招生时候又要收集学生图像采集,所以就随手写了一个图像采集工具,废话不多说,进入正题. 图像采集需要调用摄像头就行拍照操作,网上查了一下资料,需要引用以下3个dll ...
- MDK（KEIL）使用Astyle格式化代码
关于Astyle Astyle 的全称是Artistic Style的简称,是一个开源的源代码格式化工具,可以对C,C++,C#以及Java等编程语言的源代码进行缩进.格式化.美化. Home Pag ...
- 4_4.springboot之Web开发登录和拦截器
1.登录处理 1).禁用模板引擎的缓存 # 禁用缓存 spring.thymeleaf.cache=false 2).页面修改完用ctrl+f9:重新编译: LoginController @Cont ...
- 18-2-call和apply
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- day3-编码、文件、集合、函数、递归
学习内容: 1. 文件编码 2. 文件 3. 集合 4.函数 5.递归 6.匿名函数 1. 文件编码: 常见的字符串编码有:ASCII 扩展的ASCII Unicode GBK GB2312 GB18 ...
- 【JZOJ1259】牛棚安排
description Farmer John的N(1<=N<=1000)头奶牛分别居住在农场所拥有的B(1<=B<=20)个牛棚的某一个里.有些奶牛很喜欢她们当前住的牛棚,而 ...
- C++指针类型间强制转换
深入理解指针类型间的转换 C++中指针的强制转换 强制类型转换(int).(int&)和(int*)的区别 内存中的地址 地址的本质就是一串0和1的机器代码,内存中的地址没有明确数据类型,但地 ...
- duilib教程之duilib入门简明教程4.响应按钮事件
上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI; 也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介绍下,CC ...