<!DOCTYPE html>
<html>
<head>
<title>vue-resource</title>
<meta charset="utf-8">
</head> <body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
</div>
</body>
<!-- 基于vue-resource实现get post请求 也可利用axios第三方包实现-->
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script>
<script>
// vue-promise是基于vue的,所以引入CDN库时需要注意顺序,应先引入vue
let vm = new Vue({
el: "#app",
data:{
},
methods:{//vue-resource发送请求是基于promise的
getInfo(){
this.$http.get('https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/result/cart.json')
.then(res=>{
console.log(res);
})
},
postInfo(){
this.$http.post('https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/upload',{},{
emulateJSON:true//设置这个参数相当于application/x-www-form-urlencoded,由于手动提交请求没有默认表单格式,需要设置发送的数据格式
})
.then(res=>{
console.log(res.body);
})
},
}
});
</script>
</html>

vue-resource发送请求的更多相关文章

  1. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  2. Vue笔记:使用 axios 发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

  3. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...

  4. vue中使用axios发送请求

    我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...

  5. Vue 爬坑之路—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios  ...

  6. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  7. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

  8. vue中配置axios.js文件,发送请求

    为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...

  9. 【vue】vue +element 搭建项目,实现实时输入效果时停止输入后发送请求

    1.实现的效果 输入关键字后,根据输入的关键字实时显示搜索的结果,按回车键时也进行搜索 2.原理: 通过时间戳+定时器+一个全局变量实现.代码量很少比较易懂. 用户输入时触发keyup事件,并调用事件 ...

  10. vue如何发请求

    1.vue 支持开发者引入 jquery 使用 $.ajax() 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1.首先,在 package.json 中添加 j ...

随机推荐

  1. Linux_CentOS用户管理 和 用户权限管理 chmod、ACL、 visudo

    一.用户管理 Linux 系统同时可以支持多个用户,每个用户对自己的文件设备有特殊的权利,能够保 证用户之间互不干扰.就像手机开了助手一样,同时登陆多个 qq 账号,当硬件配置非常高 时,每个用户还可 ...

  2. Angular中使用ECharts图表

    1.安装: npm install echarts --save 2.在 TypeScript 文件中导入echarts import * as echarts from 'echarts'; 3.根 ...

  3. 008-SpringBoot发布WAR启动报错:Error assembling WAR: webxml attribute is required

    一.Spring Boot发布war包流程: 1.修改web model的pom.xml <packaging>war</packaging> SpringBoot默认发布的都 ...

  4. linux非root用户安装5.7.27版本mysql

    先下安装包,到mysql官网https://dev.mysql.com/downloads/mysql/选好安装包版本.操作系统类型(默认是最新版本,点击右边链接Looking for previou ...

  5. Linux strace追踪命令详解

    strace介绍 strace命令是一个集诊断.调试.统计与一体的工具,我们可以使用strace对应用的系统调用和信号传递的跟踪结果来对应用进行分析,以达到解决问题或者是了解应用工作过程的目的.当然s ...

  6. python防止sql注入的方法

    python防止sql注入的方法: 1. 使用cursor.execute(sql, args)的参数位: sql_str = "select * from py_msgcontrol.py ...

  7. Linux DNS 服务器配置与管理

    一.环境介绍: 运行软件:VMware Workstation Pro 14 系统环境:CentOS-7-x86_64-1810 二.操作配置: 1.基础知识简介 (1)域名空间 域和域名: DNS树 ...

  8. [#] - .Net平台的实时性能监控

    App Metricshttps://www.app-metrics.io ASP.NET Core之跨平台的实时性能监控http://www.cnblogs.com/GuZhenYin/p/7170 ...

  9. flask返回数据类型

    服务器这种后台返回的数据只能是string,json或者是文件类型,对应Html的解析文件类型 无法返回自定义的元组,只能返回规定好的元组,说白了只第一个元素有效 所有返回前台的内容其实都应该是Res ...

  10. github.com连接超时

     https://blog.csdn.net/hanchao5272/article/details/79393393 1.错误信息 之前github都能用,但是今天git clone的时候居然连不上 ...