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

最新推荐文章于 2024-06-14 15:30:38 发布

何迟

最新推荐文章于 2024-06-14 15:30:38 发布

阅读量5.1k

点赞数 12

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82829787

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

注意：

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>

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

何迟

关注

12
点赞
踩
13

收藏

觉得还不错? 一键收藏
4
评论
Vue-resource三种请求格式和万能测试地址

注意：1.前端服务器测试地址的万能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能响应各种请求。点击进入官网2.这里测试只写了成功的回调函数，同时还要失败时的回调函数。 HTML代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;met...
复制链接

扫一扫

专栏目录