Vuejs全家桶系列(二)--- Ajax请求

2017-12-18 18:36:34来源:CSDN作者:Nate__River人点击

分享
第七城市

简介

vue与ajax

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

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();            }        }    }

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!");            }        });

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

2.使用jquery

2.1 get请求

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

2.2 post请求

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

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

3.2get请求

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

3.3 post请求

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

3.4 emulateJSON: true的作用

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

4. 使用axios

axios是vue2.0官方推荐的

4.1基本用法

axios([options])

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

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

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

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

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

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);});

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);});
第七城市

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台