AJAX方式调用百度天气
后台代码:
[HttpPost] public string AjaxWeather() { string CityName = string.IsNullOrEmpty(Request.Form["city"]) ? "" : Request.Form["city"].ToString(); //获取城市名称 if (CityName!="") { string WeatherInfo = HttpGet(string.Format("http://api.map.baidu.com/telematics/v3/weather?location={0}&output=json&ak=8f6d52bdd67cfe7b6c3db91adb29a51b", HttpUtility.UrlEncode(CityName))); return WeatherInfo; //返回JSON } else { return ""; } }
#region HttpGet /// <summary> /// Get方式取信息 /// </summary> /// <param name="Url"></param> /// <param name="postDataStr"></param> /// <returns></returns> public string HttpGet(string Url) { HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Url); request.Method = "GET"; request.ContentType = "text/html;charset=UTF-8"; HttpWebResponse response = (HttpWebResponse)request.GetResponse(); Stream myResponseStream = response.GetResponseStream(); StreamReader myStreamReader = new StreamReader(myResponseStream, System.Text.Encoding.GetEncoding("utf-8")); string retString = myStreamReader.ReadToEnd(); myStreamReader.Close(); myResponseStream.Close(); return retString; } #endregion
JSON内容:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 { 2 "error": 0, 3 "status": "success", 4 "date": "2015-04-28", 5 "results": [ 6 { 7 "currentCity": "哈尔滨", 8 "pm25": "74", 9 "index": [ 10 { 11 "title": "穿衣", 12 "zs": "舒适", 13 "tipt": "穿衣指数", 14 "des": "建议着长袖T恤、衬衫加单裤等服装。年老体弱者宜着针织长袖衬衫、马甲和长裤。" 15 }, 16 { 17 "title": "洗车", 18 "zs": "较适宜", 19 "tipt": "洗车指数", 20 "des": "较适宜洗车,未来一天无雨,风力较小,擦洗一新的汽车至少能保持一天。" 21 }, 22 { 23 "title": "旅游", 24 "zs": "适宜", 25 "tipt": "旅游指数", 26 "des": "天气较好,温度适宜,但风稍微有点大。这样的天气适宜旅游,您可以尽情地享受大自然的无限风光。" 27 }, 28 { 29 "title": "感冒", 30 "zs": "少发", 31 "tipt": "感冒指数", 32 "des": "各项气象条件适宜,无明显降温过程,发生感冒机率较低。" 33 }, 34 { 35 "title": "运动", 36 "zs": "较适宜", 37 "tipt": "运动指数", 38 "des": "天气较好,但考虑风力较强且气温较低,推荐您进行室内运动,若在户外运动请注意防风并适当增减衣物。" 39 }, 40 { 41 "title": "紫外线强度", 42 "zs": "中等", 43 "tipt": "紫外线强度指数", 44 "des": "属中等强度紫外线辐射天气,外出时建议涂擦SPF高于15、PA+的防晒护肤品,戴帽子、太阳镜。" 45 } 46 ], 47 "weather_data": [ 48 { 49 "date": "周二 04月28日 (实时:25℃)", 50 "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/duoyun.png", 51 "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/qing.png", 52 "weather": "多云转晴", 53 "wind": "西南风3-4级", 54 "temperature": "28 ~ 13℃" 55 }, 56 { 57 "date": "周三", 58 "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/qing.png", 59 "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/duoyun.png", 60 "weather": "晴转多云", 61 "wind": "南风4-5级", 62 "temperature": "31 ~ 16℃" 63 }, 64 { 65 "date": "周四", 66 "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/qing.png", 67 "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/duoyun.png", 68 "weather": "晴转多云", 69 "wind": "西风3-4级", 70 "temperature": "26 ~ 15℃" 71 }, 72 { 73 "date": "周五", 74 "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/zhenyu.png", 75 "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/zhenyu.png", 76 "weather": "阵雨", 77 "wind": "西南风3-4级", 78 "temperature": "25 ~ 12℃" 79 } 80 ] 81 } 82 ] 83 }
Html代码:
城市名称:<input id="city" name="city" type="text" value="@ViewBag.City">
jQuery的Html容器<div id="WeatherHtml"></div>
jQuery代码:
<script type="text/javascript"> $(function () { Weather(); }); function Weather() { var _city = $("#city").val(); $.post('/WebApi/AjaxWeather', { city: _city }, function (result) { //alert(result); var dataObj = eval('(' + result + ')'); var html = ''; if (dataObj.status = 'success') { $.each(dataObj.results, function (idx, item) { html += '<div>城市名称:' + item.currentCity + '</div>'; html += '<div>PM2.5:' + item.pm25 + '</div>'; html += '<table>'; $.each(item.index, function (idx2, item2) { html += '<tr>'; html += '<td>' + item2.tipt + '</td>'; html += '<td>' + item2.title + '</td>'; html += '<td>' + item2.zs + '</td>'; html += '<td>' + item2.des + '</td>'; html += '</tr>'; }); html += '</table>'; html += '<table>'; $.each(item.weather_data, function (idx3, item3) { html += '<tr>'; html += '<td>' + item3.date + '</td>'; html += '<td><img src="' + item3.dayPictureUrl + '"/></td>'; html += '<td><img src="' + item3.nightPictureUrl + '"/></td>'; html += '<td>' + item3.weather + '</td>'; html += '<td>' + item3.wind + '</td>'; html += '<td>' + item3.temperature + '</td>'; html += '</tr>'; }); html += '</table>'; }); } $("#WeatherHtml").html(html); }); } </script>
量的积累到质的飞越