通过axios实现数据请求

vue.js默认没有提供ajax功能的。

所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。

注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。

下载地址：

1 2	`https://unpkg.com/axios@0.18.0/dist/axios.js` `https://unpkg.com/axios@0.18.0/dist/axios.min.js`

axios提供发送请求的常用方法有两个：axios.get() 和 axios.post() 。

// 发送get请求
   // 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
   // 参数2：可选，json对象，要提供给数据接口的参数
   // 参数3：可选，json对象，请求头信息
   axios.get('服务器的资源地址',{
       params:{  // get参数
           参数名:'参数值', // id: 200,
       },
       header:{  // 请求头
            
       }
   }).then(function (response) { // 请求成功以后的回调函数
           console.log("请求成功");
           console.log(response.data); // 获取服务端提供的数据
    
   }).catch(function (error) {   // 请求失败以后的回调函数[如果then里面代码有错误，也会执行这里的代码]
           console.log("请求失败");
           console.log(error.response);  // 获取错误信息
   });
 
   // 发送post请求，参数和使用和axios.get()一样。
   // 参数1: 必填，字符串，请求的数据接口的url地址
   // 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
   // 参数3：可选，json对象，请求头信息
   axios.put('服务器的资源地址',{
       username: 'xiaoming',
       password: '123456'
   },{
       responseData:"json",
   })
   .then(function (response) { // 请求成功以后的回调函数
     console.log(response);
   })
   .catch(function (error) {   // 请求失败以后的回调函数
     console.log(error);
   });
 
    
   // b'firstName=Fred&lastName=Flintstone'

1、jQuery版本的Ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
    $(function(){
        $("#btn").on("click",function(){
            $.ajax({
                // 后端程序的url地址
                url: 'http://wthrcdn.etouch.cn/weather_mini',
                // 也可以使用method，提交数据的方式，默认是'GET'，常用的还有'POST'
                type: 'get', 
                dataType: 'json',  // 返回的数据格式，常用的有是'json','html',"jsonp"
                data:{ // 设置发送给服务器的数据，如果是get请求，也可以写在url地址的?后面
                    "city":'北京'
                }
            })
            .done(function(resp) {     // 请求成功以后的操作
                console.log(resp);
            })
            .fail(function(error) {    // 请求失败以后的操作
                console.log(error);
            });
        });
    })
    </script>
</head>
<body>
<button id="btn">点击获取数据</button>
</body>
</html>

2、Vue版本的Ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="city">
        <button @click="get_weather">点击获取天气</button>
 
        <div>
 
            <ul v-for="day in weather_content">
                <li>{{day.date}} 最高温度：{{day.high}} 最低温度：{{day.date}} 类型：{{day.type}} </li>
            </ul>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                city:"",
                weather_content:""
            },
            methods:{
                get_weather(){
                    // http://wthrcdn.etouch.cn/weather_mini?city=城市名称
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                        .then(response=>{
                            console.log(response);
                            this.weather_content = response.data.data.forecast
 
                        }).catch(error=>{
                            console.log(error.response)
                    });
                  // 上面的参数写法,也可以是下面这种格式:
                  // axios.get("http://wthrcdn.etouch.cn/weather_mini",{
                  //     // get请求的附带参数
                  //     params:{
                  //         "city":"广州",
                  //     }
                  // }).then(response=>{
                  //     console.log(response.data);  // 获取接口数据
                  // }).catch(error=>{
                  //     console.log(error.response); // 获取错误信息
                  // })
                }
            }
        })
    </script>
</body>
</html>