天气预报API_02_前端页面
2020-07-29 本文已影响0人
付少_Flj
天气预报API_02_前端页面
页面显示如下：
天气预报.png
其中天气预报显示的html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气预报</title>
<style>
#container {
width: 500px;
min-height: 300px;
padding: 10px;
}
#info {
height: 200px;
padding: 10px;
background:#adacac;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
//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 =
'<p>城市：'+ city +'</p>'
+ '<p>日期：'+ data.date +'</p>'
+ '<p>温度：'+ data.temperature + '<p>'
+ '<p>天气：'+ data.weather + '</p>'
+ '<p>风向：'+ data.direct + '</p>';
// + data.temperature + data.weather + data.direct ;
//$("#cityName").text(city);
//console.log(tag);
$("#info").html(tag);
}
});
})
})
</script>
</head>
<body>
<div id="container">
城市：
<input type="text" id="city">
<input type="button" value="查询" id="btn">
<p>
<div id="info" >输入城市名称，点击查询获取天气数据
<!-- <p id="cityName"></p> -->
</div>
</p>
</div>
</body>
</html>
通过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格式输出即可。
