.net请求Webservice简单实现天气预报功能

很久没有接触Webservice的知识,今天稍微复习了一下关于webservice,简单做了一个天气预报的功能,虽然界面丑的厉害,但功能算是实现了,以下是效果展示。

这东西没什么难点,只是天气预报的功能在网站类的开发中会经常用到,所以就简单写下,以便以后查阅。

1.新建一个网站或者web应用程序,添加一个aspx页面,用于展示天气数据。(这个应该不用细讲吧)

2.在网上找一个免费的天气预报的接口,我用的是Webxml网站的,地址如下:

http://webservice.webxml.com.cn/WebServices/WeatherWS.asmx

3.在项目目录下,  引用  —  添加服务引用,弹出对话框,然后输入接口地址,点击前往,命名空间可以改成你想要的,如下图:

 

4.确定,至此,天气接口服务就已经完成了,接下来就是Coding了。

部分前台js界面代码:

//省份
        function LoadProvince() {
            $.ajax({
                type: "POST",
                url: "ashx/weatherHandler.ashx",
                data: "option=province",
                success: function (result) {
                    $(".sel-province option").remove();
                    var arry = result.split(‘|‘);
                    var obj = null;
                    for (var i = 0; i < arry.length; i++) {
                        if (arry[i] != null && arry[i] != "") {
                            obj = arry[i].split(‘,‘);
                            $(".sel-province").append("<option value=‘" + obj[1] + "‘>" + obj[0] + "</option>");
                        }
                    }
                    $(".sel-province").find("option[text=‘北京‘]").attr("selected", "selected");
                },
                error: function (errorMsg) {
                    $(".result-table tr").remove();
                    $(".result-table").append("<tr><td>省份请求出现错误,请您稍后重试。。。</td></tr>");
                }
            });
        }
        //城市
        function LoadCity(provinceid) {   
            $.ajax({
                type: "POST",
                url: "ashx/weatherHandler.ashx",
                data: "provinceid=" + provinceid + "&option=city",
                success: function (result) {
                    $(".sel-city option").remove();
                    var arry = result.split(‘|‘);
                    var obj = null;
                    for (var i = 0; i < arry.length; i++) {
                        if (arry[i] != null && arry[i] != "") {
                            obj = arry[i].split(‘,‘);
                            $(".sel-city").append("<option value=‘" + obj[1] + "‘>" + obj[0] + "</option>");
                        }
                    }
                },
                error: function (errorMsg) {
                    $(".result-table tr").remove();
                    $(".result-table").append("<tr><td>城市请求出现错误,请您稍后重试。。。</td></tr>");
                }
            });
        }
        //加载天气
        function GetWeather(cityid) {
            $.ajax({
                type: "POST",
                url: "ashx/weatherHandler.ashx",
                data: "cityid=" + cityid + "&option=weather",
                success: function (result) {
                    $(".result-table tr").remove();
                    var arry = result.split(‘|‘);
                    var obj = null;
                    for (var i = 0; i < arry.length; i++) {
                        if (arry[i] != null && arry[i] != "") {
                            if (arry[i].indexOf(".gif") > 0) {
                                $(".result-table").append("<tr><td><image src=‘images/" + arry[i] + "‘/></td></tr>");
                            }
                            else {
                                $(".result-table").append("<tr><td>" + arry[i] + "</td></tr>");
                            }
                        }
                    }
                },
                error: function (errorMsg) {
                    $(".result-table tr").remove();
                    $(".result-table").append("<tr><td>天气数据请求出现错误,请您稍后重试。。。</td></tr>");
                }
            });
        }

  html代码:

<body>
    <form id="form1" runat="server">
    <div class="head-div">
        <table>
            <tr>
                <td>
                    <select class="sel-province sel">
                    </select>
                </td>
                <td>
                    <select class="sel-city sel">
                    </select>
                </td>
                <td>
                    <input type="button" class="btn-search" value="查询" />
                </td>
            </tr>
        </table>
    </div>
    <div class="result-div">
        <table class="result-table">
        </table>
    </div>
    </form>
</body>

  由于js不支持跨域,要不当初直接ajax请求天气接口就完事了,现在处理方式是:ajax+ashx一般处理程序(在里面调用天气接口)。

一般处理程序代码如下:

using System.Web;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;

namespace WeatherTest.ashx
{
    /// <summary>
    /// weatherHandler 的摘要说明
    /// </summary>
    public class weatherHandler : IHttpHandler
    {
        WeatherWsClient.WeatherWSSoapClient client = new WeatherWsClient.WeatherWSSoapClient();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string[] result = null;
            string option = context.Request.Form["option"];
            switch (option)
            {
                case "province":
                    result = GetProvinces();
                    break;
                case "city":
                    result = GetCitys(context.Request.Form["provinceid"]);
                    break;
                case "weather":
                    result = GetWeather(context.Request.Form["cityid"], null);
                    break;
            }
            string str = ConvertToString(result, option);

            context.Response.Write(str);
        }
        /// <summary>
        /// 数组转字符串
        /// </summary>
        /// <param name="result"></param>
        /// <param name="option"></param>
        /// <returns></returns>
        private string ConvertToString(string[] result, string option)
        {
            StringBuilder sb = new StringBuilder();
            foreach (string item in result)
            {
                sb.Append(item+"|");
            }
            return sb.ToString();
        }

        /// <summary>
        /// 省份
        /// </summary>
        /// <returns></returns>
        private string[] GetProvinces()
        {
            return client.getRegionProvince();
        }
        /// <summary>
        /// 城市
        /// </summary>
        /// <param name="provinceid"></param>
        /// <returns></returns>
        private string[] GetCitys(string provinceid)
        {
            return client.getSupportCityString(provinceid);
        }
        /// <summary>
        /// 天气数据
        /// </summary>
        /// <param name="cityid"></param>
        /// <param name="userid"></param>
        /// <returns></returns>
        private string[] GetWeather(string cityid, string userid)
        {
            return client.getWeather(cityid, userid);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 至此,前后台代码就已经完毕了,顺便说句,由于写的比较简单,路过的大神不喜勿喷,谢谢。

.net请求Webservice简单实现天气预报功能,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。