<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气预报</title>
<script src="jquery/jquery-1.12.4.min.js"></script>
<script>
// 定义入口函数
$(function(){
//2、获取#btnok按钮
$('#btnok').click(function(){
//3、获取城市的名称
var city =$('#city').val();
//4、使用Ajax技术向API接口发送HTTP请求（GET请求），参数要求是一个JS对象
$.get('http://wthrcdn.etouch.cn/weather_mini', 'city='+city, function(response){
$('#tianqi').append('城市名称：' + city);
$('#tianqi').append('<br>')
$('#tianqi').append('日期信息：' + response.data.forecast[0].date)
$('#tianqi').append('<br>')
$('#tianqi').append('天气信息：' + response.data.forecast[0].type)
$('#tianqi').append('<br>')
$('#tianqi').append('天气信息：' + response.data.forecast[0].low +response.data.forecast[0].high)
$('#tianqi').append('<br>')
}, 'JSON');
});
});
</script>
</head>
<body>
<input type="text" id="city">
<input type="button" id="btnok" value="查询天气情况">
<hr>
<div id="tianqi"></div>
</body>
</html>
扫一扫
7560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
