"一、简介　　1、vue 本身不支持发送 AJAX 请求，需要使用 vue-resource（vue1.0 版本）、axios（vue2.0 版本）等插件实现　　2、axios 是一个基于 Promise 的 HTTP 请求客户端，用来发送请求，也是 vue2.0 官方推荐的，同时不再对 vue ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 8 浏览 • 4 个月前

vue 发送ajax请求

一、简介

　　1、vue 本身不支持发送 AJAX 请求，需要使用 vue-resource（vue1.0 版本）、axios（vue2.0 版本）等插件实现

　　2、axios 是一个基于 Promise 的 HTTP 请求客户端，用来发送请求，也是 vue2.0 官方推荐的，同时不再对 vue-resource 进行更新和维护

　　3、参考：GitHub 上搜索 axios，查看 API 文档
二、使用 axios 发送 AJAX 请求
　　1、安装 axios 并引入

　　　　1、npm install axios -S #直接下载 axios 组件，下载完毕后 axios.js 就存放在 node_modules\axios\dist 中

　　　　 2、网上直接下载 axios.min.js 文件

　　　　 3、通过 script src 的方式进行文件的引入
　　2、发送 get 请求

　　　　1、基本使用格式

　　　　　　格式 1：axios([options]) #这种格式直接将所有数据写在 options 里，options 其实是个字典

　　　　　　格式 2：axios.get(url[,options]);

　　　　2、传参方式：
　　通过 url 传参
　通过 params 选项传参

　　　　3、案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送 AJAX 请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#itany',
                data:{
                    user:{
                        name:'alice',
                        age:19
                    },
                },
                methods:{send(){
                        axios({
                            method:'get',
                            url:'http://www.baidu.com?name=tom&age=23'
                        }).then(function(resp){console.log(resp.data);
                        }).catch(resp => {
                            console.log('请求失败：'+resp.status+','+resp.statusText);});
                    },
                    sendGet(){
                        axios.get('server.php',{
                            params:{
                                name:'alice',
                                age:19
                            }
                        })
                        .then(resp => {console.log(resp.data);
                        }).catch(err => {             //
                            console.log('请求失败：'+err.status+','+err.statusText);});
                    },
                }
            });}
    </script>
</head>
<body>
    <div id="itany">
        <button @click="send">发送 AJAX 请求</button>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">@click</span><span style="color: rgba(0, 0, 255, 1)">="sendGet"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>GET方式发送AJAX请求<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</body>
</html>

View Code

　　3、发送 post 请求（push,delete 的非 get 方式的请求都一样）

　　　　1、基本使用格式

　　　　　　格式：axios.post(url,data,[options]);

　　　　2、传参方式

　　　　　　1、自己拼接为键值对

　　　　　　2、使用 transformRequest，在请求发送前将请求数据进行转换

　　　　　　3、如果使用模块化开发，可以使用 qs 模块进行转换

　　　　　　4、注释：axios 默认发送 post 数据时，数据格式是 Request Payload，并非我们常用的 Form Data 格式，所以参数必须要以键值对形式传递，不能以 json 形式传参

　　　　3、案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送 AJAX 请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#itany',
                data:{
                    user:{
                        name:'alice',
                        age:19
                    },
                },
                methods:{sendPost(){
                        // axios.post('server.php',{
                        //         name:'alice',
                        //         age:19
                        // }) // 该方式发送数据是一个 Request Payload 的数据格式，一般的数据格式是 Form Data 格式，所有发送不出去数据
                        // axios.post('server.php','name=alice&age=20&') // 方式 1 通过字符串的方式发送数据
                        axios.post('server.php',this.user,{  //方式 2 通过 transformRequest 方法发送数据，本质还是将数据拼接成字符串
                            transformRequest:[
                                function(data){
                                    let params='';
                                    for(let index in data){
                                        params+=index+'='+data[index]+'&';
                                    }
                                    return params;
                                }
                            ]
                        })
                        .then(resp => {console.log(resp.data);
                        }).catch(err => {
                            console.log('请求失败：'+err.status+','+err.statusText);});
                    },
                }
            });}
    </script>
</head>
<body>
    <div id="itany">
        <button @click="send">发送 AJAX 请求</button>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">@click</span><span style="color: rgba(0, 0, 255, 1)">="sendGet"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>GET方式发送AJAX请求<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</body>
</html>

View Code

　　4、发送跨域请求
　　 1、须知：axios 本身并不支持发送跨域的请求，没有提供相应的 API，作者也暂没计划在 axios 添加支持发送跨域请求，所以只能使用第三方库

　　　　2、使用 vue-resource 发送跨域请求

　　　　3、安装 vue-resource 并引入

　　　　　　　npm info vue-resource #查看 vue-resource 版本信息
　　　　　　 cnpm install vue-resource -S #等同于 cnpm install vue-resource -save

　　　　4、基本使用方法（使用 this.$http 发送请求）

　　　　　　 this.$http.get(url, [options])

　　　　　　 this.$http.head(url, [options])

　　　　　　 this.$http.delete(url, [options])

　　　　　　this.$http.jsonp(url, [options])

　　　　　　 this.$http.post(url, [body], [options])

　　　　　　this.$http.put(url, [body], [options])

　　　　　　this.$http.patch(url, [body], [options])

　　　　5、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发送 AJAX 请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/vue-resource.js"></script>
</head>
<body>
<div id="itany">
<a>{{name}}</a>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">v-on:click</span><span style="color: rgba(0, 0, 255, 1)">="send"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>sendJSONP<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</div>
</body>
<script>
new Vue({
el: '#itany',
data:{
name: 'alice',
age: 19
},
methods:{
send:function(){
//                https://sug.so.360.cn/suggest?callback=suggest_so&amp;encodein=utf-8&amp;encodeout=utf-8&amp;format=json&amp;fields=word&amp;word=a
this.$http.jsonp('https://sug.so.360.cn/suggest',
{params:{
word:'a'
}}
).then(function (resp) {
console.log(resp.data)
})
        }
    }
})

</script>
</html>

基本返送方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发送 AJAX 请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/vue-resource.js"></script>
</head>
<body>
<div id="itany">
<a>{{name}}</a>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">v-on:click</span><span style="color: rgba(0, 0, 255, 1)">="send"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>sendJSONP<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</div>
</body>
<script>
new Vue({
el: '#itany',
data:{
name: 'alice',
age: 19
},
methods:{
send:function(){
//                https://sug.so.360.cn/suggest?callback=suggest_so&amp;encodein=utf-8&amp;encodeout=utf-8&amp;format=json&amp;fields=word&amp;word=a
this.$http.jsonp('https://sug.so.360.cn/suggest',
{params:{
word:'a'
}}
).then(resp=> {
console.log(resp.data)
})
        }
    }
})

</script>
</html>

基本发送方式 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发送 AJAX 请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/vue-resource.js"></script>
</head>
<body>
<div id="itany">
    <button v-on:click="send">向百度搜索发送 JSONP 请求</button>
</div>
</body>
<script>
    new Vue({
        el:'#itany',
        data:{
            name:'za'
        },
        methods:{
            send:function () {
                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                    {params:{wd:'a'},
                        jsonp:'cb', //百度使用的 jsonp 参数名为 cb，所以需要修改, 默认使用的是 callbakc 参数就不用修改
                    }).then(function (resp) {console.log(resp.data)
                }).catch(function (err) {console.log(err)
                })}}
})

</script>
</html>

带 jionsp 参数的

vue 发送ajax请求

相关帖子

随便看看

vue 发送ajax请求