<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>weather search</title>
</head>
<body>
<div id="box">
<select id="city">
<option value="101010100">北京</option>
<option value="101020100">上海</option>
<option value="101030100">天津</option>
<option value="重庆">重庆</option>
<option value="哈尔滨">哈尔滨</option>
</select>
<input type="button" value="查询" id="btn" />
</div>
<div id="content"></div>
</body>
</html>
<script src="jquery-1.11.2.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$("#content").text("");
var cityCode = $("#city").val();
url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code='+cityCode;
var script = document.createElement("script");
script.src = url;
$("body").append(script);
$.ajax({
type:"get",
url:url,
dataType:"jsonp",
jsonp:"callback",//替换地址中的callback
jsonpCallback:"callback",//自定义的jsonp回调函数名,生成一个全局的方法
success:function(data){
for(var i = 0; i<data.weather.length; i++){
var p = $("<p></p>");
$("#content").append(p);
var that = data.weather[i];
//alert(that);
p.html('日期:'+that.date);
}
},
error:function(e){
$("#content").text("错误");
console.log(e);
}
});
});
})
</script>