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、案例:

vue 发送ajax请求
<!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>

        <button @click="sendGet">GET方式发送AJAX请求</button>

    </div>
</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、案例:

vue 发送ajax请求
<!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>

        <button @click="sendGet">GET方式发送AJAX请求</button>

    </div>
</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、案例

vue 发送ajax请求
<!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>

    <button v-on:click="send">sendJSONP</button>

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

            }
        }
    })
</script>
</html>

基本返送方式
View Code
vue 发送ajax请求
<!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>

    <button v-on:click="send">sendJSONP</button>

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

            }
        }
    })
</script>
</html>

基本发送方式2
View Code
vue 发送ajax请求
<!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参数的
View Code

原文链接:https://www.cnblogs.com/xuanan/p/7847233.html

vue 发送ajax请求

上一篇:mongodb基本操作,CRUD


下一篇:MySQL的自增ID用完了,怎么办?