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 相关文章推荐
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
JS实现简易贪吃蛇游戏
Aug 24 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作的文本留言本的例子(三)
2006/10/09 PHP
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php生成随机密码的几种方法
2011/01/17 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
javascript倒计时功能实现代码
2012/06/07 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python字符串的拼接方法总结
2019/11/18 Python
python中property和setter装饰器用法
2019/12/19 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
经典演讲稿开场白
2014/08/25 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers