Vue——13——vue resource发起get post jsonp请求

最新推荐文章于 2024-10-02 12:09:21 发布

野生小米椒

最新推荐文章于 2024-10-02 12:09:21 发布

阅读量105

点赞数

分类专栏： VUE框架

本文链接：https://blog.csdn.net/x1037490413/article/details/107128033

版权

VUE框架专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-resource-1.3.4.js"></script>
    <!-- 注意 vue-resource依赖于vue,注意先后顺序导包 -->
</head>
<body>
    <div id="app">
        <input type="button" value="get请求" @click="getInfo">
        <input type="button" value="post请求" @click="postInfo">
        <input type="button" value="jsonp请求" @click="jsonpInfo">
    </div>
    <script>
       var vm=new Vue({
        el:"#app",
        data:{},
        methods:{
      getInfo(){
       //发起get请求  当发起get请求之后,通过.then来设置成功的回调函数
       //通过result.body拿到服务器返回的成功数据
       this.$http.get('http://jsonplaceholder.typicode.com/users').then(function(result){
           console.log(result.body);
           
       })
      },
      postInfo(){
         //手动发起的post请求,默认没有表单格式,所以有的服务器处理不了
         //通过post方法的第三个参数设置提交的内容类型为普通表单数据
         this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{
       console.log(result.body);
      })
      },
      jsonpInfo(){//发起jsonp请求
        this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{
       console.log(result.body)
      })
      }
        }
    }) 
    </script>
    
</body>
</html>