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 对象,包含各配置及回调函数 ...
随机推荐
- 三模数NTT模板
求两个多项式的卷积对任意数p取模 两个好记的FNT模数: 5*2^25+1 7*2^26+1 原根都为3 //Achen #include<algorithm> #include<i ...
- （转）Wireshark "The NPF driver isn’t running…"(
转:http://blog.sina.com.cn/s/blog_4bfd07180100e3ar.html 前几天重装系统,装上了windows7 RC系统.昨天开始尝试装上了wireshark 这 ...
- 一篇关于Matcher find方法深刻理解的文章
文章目录 知识点 find find(int var1) reset group(int var1) 源码 故事是这样的 探索 问题解决 方法一: 方法二: 方法三: 总结 知识点 find 首先fi ...
- 洛谷P1792——[国家集训队]种树
传送门:QAQQAQ 题意:$n$个点中选$m$个不相邻的点,使得这些点不相邻(1和n算相邻),求这些点的最大值 思路:这不是神仙题不是神仙题…… 刚看到这题觉得不难,好像只要贪心就可以了但贪心不知从 ...
- 开发笔记-19/10/28 -SpringBoot @Value 获取配置参数
1. 在application.properties 定义参数 role.taskEvent :参数名称 4:值 ## ---------------------任务角色--------------- ...
- vue项目实现按需加载的3种方式
vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: { path: '/promisedemo', name: ' ...
- 基于jdk8的格式化时间方法
背景 jdk8之前,java使用Date表示时间,在做时间的格式化时,通常使用SimpleDateFormat,但是SimpleDateFormat是非线程安全的,在写代码时通常要将之定义为局部变量或 ...
- Arrays.asList()使用的问题
在java语言中,把数组转换成List集合,有个很方便的方法就是 List<String> list = Arrays.asList("a","b" ...
- 为什么不直接使用socket ,还要定义一个新的websocket 的呢
大致概念: TCP/IP 协议,是网络七层协议的第四层,本身没有长连接或短连接的区别: HTTP 是基于 TCP 协议之上的「短连接」应用层协议,它的出现极大简化了网络应用的实现门槛,丰富了应用: S ...
- 六. Default arguments 参数默认值
示例: 注意点:函数是会默认声明参数变量的,所以不需要再重新声明一次,否则会报错 错误示例如下: 函数参数的传值方法: 需要注意的是:如果要给第二个参数传值,那第一个参数要传undefined,而不能 ...