vue学习十六 --- vue-resource三种请求方式

最新推荐文章于 2024-05-11 14:50:41 发布

ai生活的码农

最新推荐文章于 2024-05-11 14:50:41 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习笔记文章标签： vue-resource

本文链接：https://blog.csdn.net/hhyywwai/article/details/103197318

vue学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了Vue.js插件vue-resource的GET、POST和PUT三种常见的HTTP请求方式，包括它们的使用场景、参数配置以及在实际项目中的应用实例，帮助开发者更好地理解和运用vue-resource进行API交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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请求，通过function执行的成功的回调函数，得到body和data等数据
                this.$http.get('http://jsonplaceholder.typicode.com/users').then(function(result){
                    console.log(result.body);
                    // 通过result.body 获得服务器返回的数据
                    
                    
                })
            },
             //post请求，中间花括号空的部分为提交给服务器的数据这里默认，emulateJSON:true,将手动提交表单格式设置为application/x-www-form-urlencoded格式
            postInfo(){ 
                this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result =>{
                    console.log(result.body);
                    // 通过result.body 获得服务器返回的数据
                    
                })
            },
            jsonpInfo(){ 
                this.$http.post('http://jsonplaceholder.typicode.com/users').then(result =>{
                    console.log(result.body);
                    // 通过result.body 获得服务器返回的数据
                    
                })
            }
           }
        });
    </script>
</body>