h-ui天气预报HTML页面代码,天气预报API_02_前端页面

天气预报API_02_前端页面

页面显示如下：

天气预报.png

其中天气预报显示的html代码：

天气预报

#container {

width: 500px;

min-height: 300px;

padding: 10px;

}

#info {

height: 200px;

padding: 10px;

background:#adacac;

}

//javascript

$(document).ready(function(){

$("#btn").click(function(){

var city = $("#city").val();

$.ajax({

type:"get",

//后端处理数据的cgi脚本

url:"/cgi-bin/citycode.cgi",

//加在url后面的城市名字，?cityName=北京

data:{cityName:city},

//后端返回的数据格式

dataType:"json",

success:function(data){

//console.log(data.date);

//console.log(data.temperature);

//console.log(data.weather);

//console.log(data.direct);

var tag =

'

城市：'+ city +'

'

+ '

日期：'+ data.date +'

'

+ '

温度：'+ data.temperature + '

'

+ '

天气：'+ data.weather + '

'

+ '

风向：'+ data.direct + '

';

// + data.temperature + data.weather + data.direct ;

//$("#cityName").text(city);

//console.log(tag);

$("#info").html(tag);

}

});

})

})

城市：

输入城市名称，点击查询获取天气数据

通过citycode.cgi将城市名称传入到上一节中的weather程序中：

#!/bin/sh

echo "Conten-type:text/html;Cache-Control:no-cache;charset=utf-8\\n\\r\\n\\r"

city=`echo $QUERY_STRING |awk -F '[=]' '{print $2}'`

./weather $city

再简单修改weather.c的代码，处理参数获取天气数据，以json格式输出即可。