空值情况 苏州
界面如上，可以根据自己需求再添加一些内容。 功能需求：根据城市名称查询该城市的天气情况，输入空值的时候默认查询北京天气 这个是我使用聚合数据提供的免费20次请求全国天气预报API，注册了，申请使用了就会获得一个key值 实现代码如下： jquery.min.js、template-web.js需要引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气预报请求</title> <link rel="stylesheet" href="css/css.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.js"></script> <script src="js/template-web.js"></script> <script src="js/index.js"></script> </head> <body> <!-- 版心 --> <div class="box"> <!-- header start --> <div class="header"> <p class="headerText"><h2>全国城市天气查询</h2></p> </div> <!-- header end --> <!-- request start --> <div class="resquest"> <input type="text" placeholder="请输入查询城市的名称" id="btn"> </div> <!-- request end --> <!-- content start --> <div class="content"> <ul id="list"> <script type="text/html" id="tmplt" > <li> 城市：{{result.today.city}} </li> <li> 日期：{{result.today.date_y}} </li> <li> 时间：{{result.sk.time}} </li> <li> 天气：{{result.today.weather}} </li> <li> 温度：{{result.today.temperature}} </li> <li> 风向风力：{{result.today.wind}} </li> <li> 温馨提醒：{{result.today.dressing_advice}} </li> </script> </ul> </div> <!-- content end --> </div> </body> </html> $(function(){ //按回车键获取文本框的值 $("#btn").on('keydown',function(event){ if(event.keyCode == 13){ var param = $(this).val()||'北京'; $citycode = encodeURI(param); getWeather($citycode); } }); function getWeather(param){ $.ajax({ type:'get', url:'http://v.juhe.cn/weather/index?format=2&cityname='+param+'&key=3b75f15dc9ab54e9c9ae455f8340c9f1', dataType:'jsonp', jsonp:'callback', success:function(data){ // console.log(data); var html=template('tmplt',data); $("#list").html(html); } }); } }) *{ margin:0; padding: 0; } li{ list-style: none; } .box{ width: 300px; min-height: 354px; background-color: skyblue; margin: auto auto; padding:20px; text-align: center; color: #fff; } #btn{ margin-top: 10px; padding-left: 5px; height: 20px; border: 0px solid #fff; color:#FFB6C1; border-radius: 5%; } /*修改placeholder的样式*/ input::-webkit-input-placeholder{ color:#999; font-size: 12px; font-weight: lighter; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#999; font-size: 12px; font-weight: lighter; } input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#999; font-size: 12px; font-weight: lighter; } input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#999; font-size: 12px; font-weight: lighter; } .content{ width: 260px; min-height: 240px; border:1px solid #AFEEEE; margin-top: 10px; text-align: left; padding:20px; line-height: 20px; } .list{ }