<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:500px;
margin:100px auto;
overflow:hidden;
}
input{
outline:none;
border:none;
height:30px;
float:left;
}
input[type=text]{
width:80%;
text-align:center;
}
input[type=button]{
width:20%;
color:#fff;
font:400 15px/30px "微软雅黑";
}
ul{
margin-top:35px;
}
ul,li{
list-style:none;
width:100%;
}
li{
background-color:#fff;
border-radius:5px;
margin-bottom:5px;
}
li>span{
display:block;
width:33.3333333%;
height:30px;
line-height:30px;
text-align:center;
float:left;
background:lightblue;
}
</style>
<title>天气预报</title>
</head>
<body bgcolor="#f3f4f5">
<div class="box">
<input type="text" placeholder="请输入你要查询的城市"/>
<input type="button" value="查询"/>
<ul>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
var $texts=$("input[type=text]");
var $btn=$("input[type=button]");
var str="";
$texts.on("focus",function(){
$texts.val("").css("color","#aaa");
});
$btn.on("click",function(){
str=$texts.val();
if(str.length>0){
str=encodeURIComponent(str);
$.ajax({
dataType:"jsonp",
type:"get",
url:"http://v.juhe.cn/weather/index?format=2&cityname="+str+"&key=9817f1436de8051a9b635799dcb63f27",
success:function(data){
var data = data.result.future;
console.log(data);
for(var i=0;i<data.length;i++){
var time="<span>"+data[i].date+"</span>";
var temperature="<span>"+data[i].temperature+"</span>";
var weather="<span>"+data[i].weather+"</span>";
var liS="<li>"+time+temperature+weather+"</li>";
$("ul").append(liS);
}
}
});
}else{
$texts.val("WRONG！").css("color","red");
}
});
})
</script>
</html>
结果是这样的：
原文：http://www.cnblogs.com/rlann/p/6253683.html