.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;
            }
        }
    }
}

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

posted @ 2014-07-23 18:39  枫上善若水  阅读(7400)  评论(0)  编辑  收藏  举报