zoukankan      html  css  js  c++  java
  • 使用API查询天气

    服务端代码

     [HttpPost]
            public ActionResult GetWeather()
            {
                HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create("http://api.map.baidu.com/telematics/v3/weather?location=厦门&output=json&ak=5slgyqGDENN7Sy7pw29IUvrZ");
                HttpWebResponse response = (HttpWebResponse)request.GetResponse();
                Stream Strstream = response.GetResponseStream();
                StreamReader sr = new StreamReader(Strstream);
                return Content(sr.ReadToEnd());
            }

    客户端代码

    <input type="button" value="获取天气" id="btnOk" />
    <div id="divCity" style="display: none">
        <span>城市:</span>【<span id="txtCity"></span>】</div>
    <div id="divWeather">
    </div>
    <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnOk").click(function () {
                $.post("Home/GetWeather", {}, function (data, status) {
                    if (status == "success") {
    
                        var jsonData = $.parseJSON(data);
                        if (jsonData.status == "success");
                        {
                            var jsonResult = jsonData.results;
                            var strreslut = " <table ><tr> <th> 日期 </th><th>白天</th><th>夜间</th><th>天气</th><th>风</th><th> 气温</th>  </tr>";
                            $.each(jsonResult[0].weather_data, function (index, item) {
                                strreslut += "<tr><td>" + item.date + "</td><td><img src='" + item.dayPictureUrl + "'/></td><td><img src='" + item.nightPictureUrl + "'/></td><td>" + item.weather + "</td><td>" + item.wind + "</td><td>" + item.temperature + "</td></tr>";
    
                            });
                            strreslut += "</table>";
                            $("#divWeather").html("");
                            $("#divCity").css("display", "");
                            $("#txtCity").html(jsonResult[0].currentCity);
                            $("#divWeather").append(strreslut);
                        }
    
                    }
                    else {
                        alert("ajax请求失败!");
                    }
                });
            });
        });
    </script>
  • 相关阅读:
    随意记的一点 js 笔记
    关于 <video> 的兼容性测试
    placeholder 兼容 IE
    固定高度的多行文字垂直居中
    CSS 实现底部固定
    python学习之路基础篇(三)
    PyChram简单使用教程
    三级菜单的实现
    python序列化pickle/cPickle
    python解析json文件之简介
  • 原文地址:https://www.cnblogs.com/sumg/p/3897579.html
Copyright © 2011-2022 走看看