<!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>
结果是这样的：
