前言

作為前端開發人員，學過前后端互動的Ajax之后，來找個呼叫網上免費api 的專案做做、練練手吧！
讓你的作品美觀的同時實作有趣又實用的功能！

所用api

天氣 http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
獲取當前ip http://pv.sohu.com/cityjson?ie=utf-8
根據ip獲取所在城市 http://api.map.baidu.com/location/ip?ak="你的百度ak"&ip=${ip}&coor=bd09ll

實作程序

天氣預報一般是用戶訪問時自動顯示用戶當前城市的天氣，此處我沒找到直接獲得用戶當前城市的api，解決方法是使用百度地圖根據ip獲取城市的api，要獲取ip地址，所以用到搜狐獲取當前用戶ip地址的api，有點繞圈了，，，不過沒關系，一步一步來，

1、引入jQuery，以及獲取當前IP的api

只需要頁面引入script以及js中使用方法呼叫即可

<script src='./js/jquery-3.5.1.js'></script>
<script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

index.js中獲取ip

let ip = returnCitySN["cip"]  // 獲取本機ip

2、根據ip獲取城市

這里需要用到百度api，需要注冊百度開放平臺的賬號，會有檔案指導選擇對應的api，創建網站應用獲得ak號

ajax進行發起請求，jsonp解決跨域問題

// 獲取當前城市名稱
$.ajax({
    type: 'GET',
    url: `http://api.map.baidu.com/location/ip?ak=你的ak號&ip=${ip}&coor=bd09ll`,
    async: false,
    dataType: "jsonp",
    jsonp: 'callback',
    jsonpCallback: 'callback',
    contentType: "application/json;charset=utf-8",
    timeout: 5000,
    success: function (res) {
        city = res.content.address_detail.city
        $('#city').val(city)
        ajaxGet(city)  //呼叫方法獲取天氣
    },
    error: function (xhr, message) {
        alert("錯誤資訊：" + message);
    }
});

傳入城市獲取天氣

這里比較繁瑣的主要是資料系結到頁面顯示，大伙們可以看回傳值進行資料的篩選或加工，更好的符合你的需求，還有判斷顯示圖示，，我這里用的是阿里圖示庫的圖示進行顯示，需要花點時間，耐心點就好啦，

// 獲取城市天氣
function ajaxGet(city) {
    let url = encodeURI('http://wthrcdn.etouch.cn/weather_mini?city=' + city)
    $.get({
        url: url,
        dataType: "json",
        async: true,
        success: function (data) {
            console.log(data)
            if (data.desc !== 'OK' || data.status !== 1000) {
                setTimeout(function () {
                    location.reload()
                }, 1000);
                alert('實在抱歉！本站無該城市的天氣資訊~')
            }
            let todayWeather = data.data.forecast[0];
            $('.temperature').html(data.data.wendu)
            $('.city').html(data.data.city)
            $('.high').html(todayWeather.high.slice(2))
            $('.low').html(todayWeather.low.slice(2))
            $('.fengxiang').html(todayWeather.fengxiang)
            $('.fengli').html(todayWeather.fengli.substr(-5, 2))
            $('.ganmao').html(data.data.ganmao.substr(0, 5))
            $('.life').html(data.data.ganmao.slice(6))
            $('.date').html(todayWeather.date.substr(0, 3))
            $('.weekDate').html(todayWeather.date.slice(3))
            $('.weather').html(todayWeather.type)
            // 接下來四天的日期
            let nextFour = $('.nextFourDate>span')
            // 天氣圖示
            let weatherIcon = $('.weatherIcon')
            let weatherTempe = $('.tempe')
            for (let i = 0; i < 4; i++) {
                nextFour.eq(i).text(data.data.forecast[i + 1].date.slice(3))
            }
            for (let i = 0; i < 5; i++) {
                let nextOneItem = weatherIcon.eq(i)
                let weatherTypeData = data.data.forecast[i].type
                // nextOneItem.attr('data-content-after', weatherTypeData)
                nextOneItem.removeClass()
                nextOneItem.addClass('weatherIcon iconfont')
                if (i !== 0) {
                    weatherTempe.eq(i - 1).text(data.data.forecast[i].low.slice(2) + '/' + data.data.forecast[i].high.slice(2))
                }
                switch (weatherTypeData) {
                    case '陣雨': nextOneItem.addClass('icon-zhenyu')
                        break;
                    case '小到中雨': nextOneItem.addClass('icon-xiaoyudaozhongyu')
                        break;
                       //，，，，，，，，，略
                       }
                }