V-resource 发起get post jsonp请求

最新推荐文章于 2022-11-28 11:12:14 发布

原创最新推荐文章于 2022-11-28 11:12:14 发布 · 680 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用vue-resource插件进行网络请求，包括GET、POST及JSONP请求的具体实现方法，提供了完整的代码示例，帮助开发者快速掌握不同场景下的数据获取技巧。

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

引入vue-resource

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

post请求


     postmethod(){
                //发起post请求，   application/x-www-form-urlencoded
                //手动发起 post 请求，默认没有表单格式，所以，有的 服务器处理不了
                //通过post 方法的三个参数，设置提交内容类型为普通表单数据提交格式
                this.$http.post('http://localhost:9091/getList',{},{emulateJSON:true}).then(result=>{
                    console.log(result)
                })
            },

get请求

   getMethod(){//发起get请求
                this.$http.get('http://localhost:9091/getList').then( function (result) {
                    console.log(result)

                })

            }

jsonp请求

  jsonpMethod(){
                this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
                    console.log(result.body)
                })

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--//导入js包-->
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>

<div id="app">
    <input type="button" value="post请求" @click="postmethod">
    <input type="button" value="get请求" @click="getMethod">
    <input type="button" value="jsonp请求" @click="jsonpMethod">
</div>

<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {

            msg: 'hellfo  vue.js.'
        },
        methods:{
            postmethod(){
                //发起post请求，   application/x-www-form-urlencoded
                //手动发起 post 请求，默认没有表单格式，所以，有的 服务器处理不了
                //通过post 方法的三个参数，设置提交内容类型为普通表单数据提交格式
                this.$http.post('http://localhost:9091/getList',{},{emulateJSON:true}).then(result=>{
                    console.log(result)
                })
            },
            getMethod(){//发起get请求
                this.$http.get('http://localhost:9091/getList').then( function (result) {
                    console.log(result)

                })

            },
            jsonpMethod(){
                this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
                    console.log(result.body)
                })

            }
        }
    });
</script>
</body>
</html>