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 对象,包含各配置及回调函数 ...
随机推荐
- Vue+Iview+Node 搭建数据模拟接口
1.初始化node 项目 2.安装需要部件 3.编写简单代码 routers=>:index.js login.js users.js 根目录 index.js var express=re ...
- vs数据库连接问题
在swagger上测试时报错:数据库连接不上 原因:在项目中修改过connectionstring,但是每次编译时本地文件中并没有更新 修改: 修改配置文件属性:不复制 —> 始终复制
- System.Web.HttpSessionStateBase.cs
ylbtech-System.Web.HttpSessionStateBase.cs 1.程序集 System.Web, Version=4.0.0.0, Culture=neutral, Publi ...
- 引用第三方 chalk 模块
第三方模块没有默认引用到我们的电脑中,我们要进行下载 chalk 这个包是为了使输出不再单调,添加文字背景什么的,改变字体颜色什么的, npm install chalk //只需要写文件包名,不需要 ...
- HUD1686-Oulipo-kmp模板题/哈希模板题
The French author Georges Perec (1936–1982) once wrote a book, La disparition, without the letter 'e ...
- service资源
service的作用:帮助外界用户访问k8s内的服务,并且提供负载均衡 创建一个service vim k8s_svc.yml apiVersion: v1 kind: Service metadat ...
- webpack用了manifest为何还是每次都生成新的vendor?
原来的代码 //用于提取公共代码 new webpack.optimize.CommonsChunkPlugin({ //记得要在开头引入webpack names: ['vendor','manif ...
- TokuDB安装
安装TokuDB 1, 创建mysql数据目录 #顺便把临时目录创建好 mkdir -p /data/mysql/tmp groupadd -r mysql useradd -g mysql -r - ...
- C++ Builder获取系统文件的路径
取得路径的程序:(注意红色字体,由于博客显示问题,所以中间加了空格,大家自己把空格去掉即可) // -------------------------------------------------- ...
- Ubuntu 快速安装配置Odoo 12
Odoo 12预计将于今年10月正式发布,这是一次大版本更新,带来了一些不错的新特性,如 文件管理系统(DMS) 用户表单中新增字段(Internal user, Portal, Public) HR ...