騰訊天氣前後端互動案例

aaaaaries發表於2020-12-07

後端

簡介

此案例主要是應用jQuery裡的$.ajax()方法進行前後端互動

獲取url方法

搜尋騰訊天氣
F12 Network 重新整理
找到這個

右鍵點選Open in new tab
會看到如下頁面
上面的地址就是我們要用的url

$.ajax()簡介

在這裡插入圖片描述

HTML和CSS程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>騰訊天氣</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="./騰訊天氣.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .conter{
            width: 1000px;
            margin: 50px auto;
        }
        /* 摺疊邊框 */
        table {
            border-collapse: collapse;
        }

        /* 雙邊框 */
        table,
        th,
        td {
            border: 1px solid black;
        }

        th {
            height: 50px;
            width: 200px;
            font-size: 22px;
        }

        td{
            height: 35px;
            text-align: center;
            line-height: 35px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="conter">
        <table id="add">
            <tr>
                <th>時間</th>
                <th>溫度</th>
                <th>天氣</th>
                <th>風向</th>
                <th>風力</th>
            </tr>
            
        </table>
    </div>
</body>

</html>

我們使用表單來做這個樣式
關於table：

<table> 標籤定義 HTML 表格

一個 HTML 表格包括 <table> 元素，一個或多個 <tr>、<th> 以及 <td> 元素。

<tr> 元素定義表格行，<th> 元素定義表頭，<td> 元素定義表格單元。

注意：：：：

要引用jQuery庫才能使用$.ajax()方法

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

我們如果想要新增結點就要從後臺獲取到資料通過js動態新增

js程式碼

在這裡插入圖片描述 pc 電腦 xw手機
引數2用哪個傳哪個如果全用的話傳兩個用豎線隔開
不同引數返回的物件不同可以像程式碼中全列印處理看看哪個有用就用哪個

$(function () {
    var add=document.getElementById('add');
    //對返回的時間進行處理 
    function time(data){
        let times='';
        let year=data.substr(0,4);
        times=times+year+'年';
        let mounth=data.substr(4,2);
        times=times+mounth+'月';
        let day=data.substr(6,2);
        times=times+day+'日';
        let hour=data.substr(8,2);
        times=times+hour+'時';
        return times;
    }
    $.ajax({
        url: 'https://wis.qq.com/weather/common',
        type: 'get',
        // 只能搜尋市、區、縣
        data: {
            source: 'pc',
            // weather_type: 'forecast_1h',
            // weather_type:'forecast_1h|forecast_24h|index',
            weather_type:'forecast_1h|forecast_24h|index|alarm|limit|tips',
            province: '陝西省',
            city: '西安市',
            county: '長安區',
        },
        dataType: 'jsonp',
        success: function (data) {
            console.log(data);
            let ans = data.data.forecast_1h;
            // console.log(ans[0].update_time);
            // for (var i in ans)
            //     console.log(ans[i].update_time);
            console.log(data.data.index);
            // for (var i in data.data.index)
            //     console.log( data.data.index[i].name+":"+data.data.index[i].info+":"+data.data.index[i].detail);
            for (var i in ans){
                let tr=document.createElement("tr");
                let td1=document.createElement('td');
                td1.innerHTML=time(ans[i].update_time);
                let td2=document.createElement('td');
                td2.innerHTML=ans[i].degree;
                let td3=document.createElement('td');
                td3.innerHTML=ans[i].weather_short;
                let td4=document.createElement('td');
                td4.innerHTML=ans[i].wind_direction;
                let td5=document.createElement('td');
                td5.innerHTML=ans[i].wind_power;
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                tr.appendChild(td5);
                add.appendChild(tr);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // net::ERR_CONNECTION_REFUSED 發生時，也能進入
            console.info("網路出錯");
        }
    })

});