使用ajax製作網頁版天氣預報

2019-12-12 06:57:12

Ajax 即「Asynchronous Javascript And XML」（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。

Ajax = 非同步 JavaScript 和 XML 或者是 HTML（標準通用標示語言的子集）。

Ajax 是一種用於建立快速動態網頁的技術。

Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

通過在後台與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。

1

第一步驟：知識準備。

1、需要用到HTML，css，JavaScript，jquery

2、引入jquery

3、使用ajax技術實現區域性的重新整理。

2

第二步驟：程式碼實現。

1、HTML布局需要展示的內容

<h1>最新天氣實況<span>日期:<span></span></span>

</select>

</h1>

</div>

<h2>未來五天天氣預報</h2>

<ul>

</ul>

</div>

2.2、樣式展示

<style>

p,ul{margin: 0;padding: 0;}

.div{

width: 50%;

height: 640px;

margin:0 auto;

border: 1px solid #f1f1f1;

}

.div h1{

width: 100%;

height: 50px;

background: #f1f1f1;

line-height: 50px;

font-size: 23px;

text-indent: 1.5em;

}

.div h1 select{

float: right;

margin-top: 17px;

}

.div h1>span{

font-size: 13px;

color: #3a3939;

}

.div .body p{

width: 50%;

float: left;

margin: 10px 0 10px 0;

text-indent: 2em;

}

.div p:last-child{

width: 100%;

float: left;

}

.body{

overflow:hidden;

}

.forword h2{

width: 100%;

height: 50px;

background: #f1f1f1;

line-height: 50px;

font-size: 23px;

text-indent: 1.5em;

}

.forword p{

width: 100%;

height: 50px;

display: flex;

}

.forword p span{

flex: 1;

text-align: center;

line-height: 50px;

border:1px solid #dddddd;

}

.forword h2{

width: 100%;

height: 50px;

}

.forword li{

width: 100%;

height: 50px;

display: flex;

}

.forword li span{

flex: 1;

text-align: center;

line-height: 50px;

border:1px solid #dddddd;

}

</style>

2.3 ajax非同步呼叫重新整理，區域性天氣展示資料。

$("#select_city").change(function(){

var citykey = $(this).val();

$.ajax({

url: 'http://wthrcdn.etouch.cn/weather_mini',

type: 'get',

data: {

citykey:citykey

dataType: 'json',

success: function (resp) {

console.log(resp);

var date_data=resp.data.forecast[0].date;

var data_len=date_data.substr(0,3);

var data_len_day=date_data.substr(3,3);

console.log(data_len_day);

var date1=new Date();

var dateMon=date1.getMonth()+1;

var dateDay=date1.getDay();

$(".div h1 span span").html(dateMon+'月'+data_len+" "+data_len_day);

$('.body p:first-child span').html(resp.data.city);

$('.body p:nth-child(2) span').html(resp.data.forecast[0].type);

$('.body p:nth-child(3) span').html(resp.data.wendu+"℃");

$('.body p:nth-child(4) span').html(resp.data.forecast[0].fengxiang);

$('.body p:nth-child(5) span').html(resp.data.forecast[0].high);

$('.body p:nth-child(6) span').html(resp.data.forecast[0].low);

$('.body p:nth-child(7) span').html(resp.data.ganmao);

$('.forword ul').empty();

for(var i=0;i<resp.data.forecast.length;i++){

var str = resp.data.forecast[i].fengli;

var str_fengli=str.substring(9, str.length - 3)

var forword_day="<li><span>"+dateMon+'月'+resp.data.forecast[i].date+"</span><span>"+resp.data.forecast[i].type+"</span><span>"+resp.data.forecast[i].high+"</span><span>"+str_fengli+"</span><span>"+resp.data.forecast[i].low+"</span><span>"+resp.data.forecast[i].fengxiang+"</span></li>";

$('.forword ul').append(forword_day);

}

})

$('#select_city').change();

</script>

3

第三步驟：功能測試。

3.1 開啟編輯的頁面預設呼叫北京的天氣查詢

3.2 單擊下拉框選擇其它城市的天氣，查詢

3.3、測試通過，天氣顯示出來。

3.4、其它城市的天氣code如下圖所示：

101010100 北京

101020100 上海

101030100 天津

101040100 重慶

101120101 濟南

101090101 石家莊

101060101 長春

101050101 哈爾濱

101070101 瀋陽

101080101 呼和浩特

101130101 烏魯木齊

101160101 蘭州

101170101 銀川

101100101 太原

101110101 西安

101180101 鄭州

101220101 合肥

101190101 南京

101210101 杭州

101230101 福州

101280101 廣州

101240101 南昌

101310101 海口

101300101 南寧

101260101 貴陽

101250101 長沙

101200101 武漢

101270101 成都

101290101 昆明

101140101 拉薩

101150101 西寧

101340101 台北縣

101320101 香港

101330101 澳門

使用ajax製作網頁版天氣預報

1

2

3

熱門文章