Vuejs全家桶系列（二）--- Ajax请求 - VueJs - 飞燕前端网

简介

vue与ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。12

ajax基本用法

vue本身不支持发送AJAX请求，需要使用jquery、vue-resource、axios等插件实现

1.自封装ajax

1.1 封装ajax

    function ajax(data){        //第一步：创建xhr对象        var xhr = null;        if(window.XMLHttpRequest)
            xhr = new XMLHttpRequest();        else
            xhr = new ActiveXObject("Microsoft.XMLHTTP");        //第二步：准备发送前的一些配置参数
        xhr.open(data.type,data.url,true);        //第三步：执行发送的动作        if(data.type == 'get'){
            xhr.send(null);
        }else if(data.type == 'post'){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(data.data);
        }        //第四步：指定回调函数
        xhr.onreadystatechange = function(){            if(xhr.readyState == 4 ){                if(xhr.status == 200)//执行成功                    data.success(xhr.responseText);                else                    data.failure();
            }
        }
    }1234567891011121314151617181920212223242526

1.2调用ajax

        ajax({
            url:'check.php',
            data:"username="+username.value+"&password="+password.value,            type:'post',
            dataType:'json',
            success:function(data){
                info.innerHTML = data;
            },
            failure:function(){
                console.log("error!");
            }
        });123456789101112

可以参考我的另一篇博客
初窥ajax（一） ——封装ajax

2.使用jquery

2.1 get请求

$.get("check.php",{
        name:'admin',
        age:'123'
    },function(data){
    console.log(data);
});123456

2.2 post请求

$.post("check2.php",{
    name:'admin',
    age:'123'},function(data){
   console.log(data);
});123456

3.使用vue-resource

vue2.0不再对vue-resource进行更新和维护

3.1 基本用法

 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])12345678

3.2get请求

this.$http.get('check.php',{    params:{        name:'admin',        age:'123'
    }
})
.then((res) => {    console.log(res);
}, (error) => {  console.log(error);
});1234567891011

3.3 post请求

this.$http.post('check2.php',{    name:'admin',    age:'123'},{emulateJSON: true})
.then((res) => {    console.log(res);
}, (error) => {  console.log(error);
});123456789

3.4 emulateJSON: true的作用

    如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。
    启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。123

4. 使用axios

axios是vue2.0官方推荐的

4.1基本用法

axios([options])12

4.11 axios.get(url[,options]);

传参方式：
        1.通过url传参
        2.通过params选项传参1234

4.12 axios.post(url,data,[options]);

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

传参方式：
        1.自己拼接为键值对
        2.使用transformRequest，在请求发送前将请求数据进行转换
        3.如果使用模块化开发，可以使用qs模块进行转换12345

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

4.2 get请求

axios.get('check.php',{
    params:{
        name:'admin',
        age:'123'
    }
})
.then(res=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
});1234567891011

4.3 post请求

//方式一axios.post('check2.php','name=admin&age=13')
.then(res=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
});//方式二axios.post('check2.php',{
    name:'admin',
    age:'123'},{
    transformRequest:[
        function(data){
            let params='';            for(let index in data){
                params+=index+'='+data[index]+'&';
            }            return params;
        }
    ]
})
.then(res=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
});123456789101112131415161718192021222324252627

这里不再讨论jsonp，关于jsonp的内容可以参考我的另一篇博客

初窥ajax（二） ——封装jsonp