<!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. Dart抽象类和多态

    /* Dart中抽象类: Dart抽象类主要用于定义标准,子类可以继承抽象类,也可以实现抽象类接口. 1.抽象类通过abstract 关键字来定义 2.Dart中的抽象方法不能用abstract声明, ...

  2. 011-JSON、JSONObject、JSONArray使用、JSON数组形式字符串转换为List<Map<String,String>>的8种方法

    一.JSON数据格式 1.1.常用JSON数据格式 1.对象方式:JSONObject的数据是用 { } 来表示的, 例如: { "id" : "123", & ...

  3. django中同通过getlist() 接收页面form的post数组

    前端中的一些东西: <form action="people?action=edit" method="post"> <input type= ...

  4. Python - Django - ORM 多对多操作

    models.py: from django.db import models # 出版社 class Publisher(models.Model): id = models.AutoField(p ...

  5. Python - Django - ORM 常用字段

    AutoField: int 自增列,必须填入参数 primary_key=True 如果没有写 AutoField,则会自动创建一个列名为 id 的列 from django.db import m ...

  6. 海康威视实时预览回调PS流用EasyRTMP向RTMP服务器推流中视频数据处理的代码

    在上一篇方案<EasyRTMP结合海康HCNetSDK获取海康摄像机H.264实时流并转化成为RTMP直播推流(附源码)>我们介绍了将海康安防摄像机进行互联网直播的整体方案流程,其中有一个 ...

  7. LeetCode_217. Contains Duplicate

    217. Contains Duplicate Easy Given an array of integers, find if the array contains any duplicates. ...

  8. 【编程基础】CppLint工具使用过程

    前言 coding最好要形成一定的编程风格,一般常用的开源风格有google code style,可以使用cpplint工具检查是否符合该编程风格. 目录 1. linux系统使用过程: 2. wi ...

  9. vs2015.无法运行rc.exe

    1.参考文章:无法运行“rc.exe” - wb175208的专栏 - CSDN博客.html(https://blog.csdn.net/wb175208/article/details/83546 ...

  10. 探索安卓热修复框架AndFix的奥秘

    虽然阿里的AndFix框架已经出来很长时间了,但是还不了解它的同学依然挺多,接下来就跟着我一起来到AndFix的世界里一起看看,如何达到不用重新安装app就可以修复bug. 1.什么是AndFix? ...