后台代码:
[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内容:
{
"error": 0,
"status": "success",
"date": "2015-04-28",
"results": [
{
"currentCity": "哈尔滨",
"pm25": "74",
"index": [
{
"title": "穿衣",
"zs": "舒适",
"tipt": "穿衣指数",
"des": "建议着长袖T恤、衬衫加单裤等服装。年老体弱者宜着针织长袖衬衫、马甲和长裤。"
},
{
"title": "洗车",
"zs": "较适宜",
"tipt": "洗车指数",
"des": "较适宜洗车,未来一天无雨,风力较小,擦洗一新的汽车至少能保持一天。"
},
{
"title": "旅游",
"zs": "适宜",
"tipt": "旅游指数",
"des": "天气较好,温度适宜,但风稍微有点大。这样的天气适宜旅游,您可以尽情地享受大自然的无限风光。"
},
{
"title": "感冒",
"zs": "少发",
"tipt": "感冒指数",
"des": "各项气象条件适宜,无明显降温过程,发生感冒机率较低。"
},
{
"title": "运动",
"zs": "较适宜",
"tipt": "运动指数",
"des": "天气较好,但考虑风力较强且气温较低,推荐您进行室内运动,若在户外运动请注意防风并适当增减衣物。"
},
{
"title": "紫外线强度",
"zs": "中等",
"tipt": "紫外线强度指数",
"des": "属中等强度紫外线辐射天气,外出时建议涂擦SPF高于15、PA+的防晒护肤品,戴帽子、太阳镜。"
}
],
"weather_data": [
{
"date": "周二 04月28日 (实时:25℃)",
"dayPictureUrl": "http://api.map.baidu.com/images/weather/day/duoyun.png",
"nightPictureUrl": "http://api.map.baidu.com/images/weather/night/qing.png",
"weather": "多云转晴",
"wind": "西南风3-4级",
"temperature": "28 ~ 13℃"
},
{
"date": "周三",
"dayPictureUrl": "http://api.map.baidu.com/images/weather/day/qing.png",
"nightPictureUrl": "http://api.map.baidu.com/images/weather/night/duoyun.png",
"weather": "晴转多云",
"wind": "南风4-5级",
"temperature": "31 ~ 16℃"
},
{
"date": "周四",
"dayPictureUrl": "http://api.map.baidu.com/images/weather/day/qing.png",
"nightPictureUrl": "http://api.map.baidu.com/images/weather/night/duoyun.png",
"weather": "晴转多云",
"wind": "西风3-4级",
"temperature": "26 ~ 15℃"
},
{
"date": "周五",
"dayPictureUrl": "http://api.map.baidu.com/images/weather/day/zhenyu.png",
"nightPictureUrl": "http://api.map.baidu.com/images/weather/night/zhenyu.png",
"weather": "阵雨",
"wind": "西南风3-4级",
"temperature": "25 ~ 12℃"
}
]
}
]
}
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>