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内容：

{
    "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>