vue 發送ajax請求

1、簡介php

　　一、vue自己不支持發送AJAX請求，須要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件實現html

　　二、axios是一個基於Promise的HTTP請求客戶端，用來發送請求，也是vue2.0官方推薦的，同時再也不對vue-resource進行更新和維護vue

　　三、參考：GitHub上搜索axios，查看API文檔

2、使用axios發送AJAX請求

　　一、安裝axios並引入node

　　　　一、npm install axios -S #直接下載axios組件，下載完畢後axios.js就存放在node_modules\axios\dist中ios

　　　　二、網上直接下載axios.min.js文件npm

　　　　三、經過script src的方式進行文件的引入

　　二、發送get請求json

　　　　一、基本使用格式axios

　　　　　　格式1：axios([options]) #這種格式直接將全部數據寫在options裏，options實際上是個字典跨域

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

　　　　二、傳參方式：
　　經過url傳參
　經過params選項傳參

　　　　三、案例：

<!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

三、發送post請求（push,delete的非get方式的請求都同樣）

　　　　一、基本使用格式

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

　　　　二、傳參方式

　　　　　　一、本身拼接爲鍵值對

　　　　　　二、使用transformRequest，在請求發送前將請求數據進行轉換

　　　　　　三、若是使用模塊化開發，可使用qs模塊進行轉換

　　　　　　四、註釋：axios默認發送post數據時，數據格式是Request Payload，並不是咱們經常使用的Form Data格式，因此參數必需要以鍵值對形式傳遞，不能以json形式傳參

　　　　三、案例：

<!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

四、發送跨域請求
　　一、須知：axios自己並不支持發送跨域的請求，沒有提供相應的API，做者也暫沒計劃在axios添加支持發送跨域請求，因此只能使用第三方庫

　　　　二、使用vue-resource發送跨域請求

　　　　三、安裝vue-resource並引入

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

　　　　四、基本使用方法（使用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])

　　　　五、案例

基本發送方式1

<!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

基本發送方式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">
    <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>

View Code

帶jsonp參數方式

<!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>

View Code