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 对象,包含各配置及回调函数 ...
随机推荐
- Block的Retain Cycle的解决方法
一个使用Block语法的实例变量,在引用另一个实例变量的时候,经常会引起retain cycle.这个问题在使ASIHTTPRequest的block语法的时候会时不时的碰到.这个问题困扰了我这个小白 ...
- Mybatis笔记 - 原始Dao开发方法
使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper接口开发方法.原始Dao的开发方式是基于入门程序的基础上,对 控制程序 进行分层开发,程序员需要 编写 Dao接口 和 ...
- YARN 原理简介
YARN 组件 参考:Spark on Yarn | Spark,从入门到精通 YARN 采用 Master/Slave结构 ,包含ResourceManager 和 NodeManager Reso ...
- 依赖注入(DI)
Spring依赖注入(DI)的三种方式,分别为: 1. 接口注入 2. Setter 方法注入 3. 构造方法注入 依赖注入是一种思想,或者说是一种设计模式,在java中是通过反射机制实现,与具 ...
- 16.ajax_case06
# 抓取华尔街见闻实时快讯 # https://wallstreetcn.com/live/global?from=navbar import requests import json header ...
- USACO training course Checker Challenge N皇后 /// oj10125
...就是N皇后 输出前三种可能排序 输出所有可能排序的方法数 vis[0][i]为i点是否已用 vis[1][m+i]为i点副对角线是否已用 m+i 为从左至右第 m+i 条副对角线 vis[1] ...
- Java后端WebSocket的Tomcat实现(转)
文章摘要随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端 ...
- Nginx反向代理Odoo并转为https
生成证书文件 生成自签名证书,并放在指定位置 $ openssl req -x509 -days 3650 -subj '/CN=odoo.youyun.com/' -nodes -newkey rs ...
- [JZOJ3168] 【GDOI2013模拟3】踢足球
题目 描述 题目大意 有两个队伍,每个队伍各nnn人. 接到球的某个人会再下一刻随机地传给自己人.敌人和射门,射门有概率会中. 每次射门之后球权在对方111号选手. 某个队伍到了RRR分,或者总时间到 ...
- Mysql自带查询阻塞语句
select r.trx_id waiting_trx_id, r.trx_mysql_thread_Id waiting_thread, r.trx_query waiting_query, b.t ...