Vue vue-resource实现get-post-jsonp请求

最新推荐文章于 2025-06-19 11:15:00 发布

原创最新推荐文章于 2025-06-19 11:15:00 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了在前端开发中如何使用Vue-resource库进行GET、POST和JSONP请求，包括请求的发起、设置回调函数以及获取服务器响应数据的方法。

get请求

当发起get请求之后，通过 .then 来设置成功的回调函数
通过result.body拿到服务器返回的成功的数据

<div id="app">
    <input type="button" value="get请求" @click="getInfo">
</div>
<script src="../js/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{},
        methods:{
            getInfo(){
                this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(function (result) {
                    console.log(result)
                })
            }
        }
    })
</script>

在这里插入图片描述

post请求

手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
通过post方法的第三个参数，{emulateJson:true}设置提交的内容类型为普通表单数据格式

  postInfo() {
                this.$http.post('http://www.liulongbin.top:3005/api/post',{},{emulateJson:true}).then(function (result) {
                    console.log(result.body)
                })
            }

jsonp请求

返回的是一个json 解析就好了

jsonptInfo(){
                this.$http.jsonp('http://www.liulongbin.top:3005/api/jsonp').then(function (result) {
                    console.log(result.body)
                })
            }