Vue resource三种请求格式和万能测试地址


Posted in Javascript onSeptember 26, 2018

注意:

1.前端服务器测试地址的万能地址,太好用了http://jsonplaceholder.typicode.com/users,基本能响应各种请求。点击进入官网

2.这里测试只写了成功的回调函数,同时还要失败时的回调函数。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../lib/vue.js"></script>
 <script src="../lib/vue-resource.js"></script>
 <!--vue-resource是基于vue.js的,要后导入-->
</head>
<body>
  <div id="app">
   <input type="button" value="get方式" v-on:click="getInfo">
   <input type="button" value="post方式" v-on:click="postInfo">
   <input type="button" value="jsonp方式" v-on:click="jsonpInfo">
  </div>
  <script>
   var vm = new Vue({
    el:'#app',
    data:{}, 
    methods:{
     getInfo(){
     this.$http.get('http://jsonplaceholder.typicode.com/users').then(result=> {
      console.log(result.body);
     }) 
     },
     //get请求,通过function执行的成功的回调函数,得到body和data等数据 
     postInfo(){
      this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{
       console.log(result.body);
      })
     },
     //post请求,中间花括号空的部分为提交给服务器的数据这里默认,emulateJSON:true,将手动提交表单格式设置为application/x-www-form-urlencoded格式
     jsonpInfo(){
      this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{
       console.log(result.body)
      })
     }
    } 
   });
  </script>
</body>

效果:依次点击按钮得到的结果

Vue resource三种请求格式和万能测试地址

总结

以上所述是小编给大家介绍的Vue resource三种请求格式和万能测试地址,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS案例分享之金额小写转大写
May 15 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 #Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 #Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 #Javascript
深入理解react-router 路由的实现原理
Sep 26 #Javascript
node.js使用redis储存session的方法
Sep 26 #Javascript
详解Axios统一错误处理与后置
Sep 26 #Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python中字符串的处理技巧分享
2016/09/17 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
关于python写入文件自动换行的问题
2018/06/23 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
家长给老师的道歉信
2014/01/13 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
促销活动总结范文
2014/04/30 职场文书
环境卫生标语
2014/06/09 职场文书
德能勤绩工作总结
2015/08/11 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript