C# 结合 Javascript 测试获取天气信息_C#

测试效果

获取一些简单的天气信息，可以丰富我们的应用系统，比如开发一个小桌面，小组件，增加一些实用性的系统功能，本文将介绍如何使用 c# 并结合 javascript 获取天气信息，获取的数据来源于 360 浏览器首页数据，成功的测试效果如下图：

实现这样的效果主要通过如下步骤：

1、通过c#服务端获360欢迎页网页数据。

2、通过javascript 截取天气数据片段。

3、通过截取的天气数据片段，放置需要显示的 dom 容器当中。

范例运行环境

操作系统： windows server 2019 datacenter

.net版本： .netframework4.7.1 或以上

开发工具：vs2019 c#

关键代码

c#获取网页数据

获取远程地址需要使用到关键方法 getresponseresult ，具体可以参考我的文章

《c# 实现访问 web api url 提交数据并获取处理结果》

关键代码如下：

<%@ page language="c#" autoeventwireup="true"  validaterequest="false" %>
<script language="c#" runat="server">
void page_load(object sender, eventargs e)
{
        if (page.ispostback) { return; }
        webservice ws = new webservice();
        string rv = ws.getresponseresult("https://hao.360.com/?a1004", encoding.utf8, "get", "");
        _rv.text = rv;
}
</script>

访问的关键 url 地址为 https://hao.360.com/?a1004 ，获取到的网页数据将存储到 rv 字符串变量里。

前端代码

前端代码主要放置了 today (今天) 和 tomorrow （明天）的 div 容器，另外 id 为 “_rv” 的 label 控件接受服务返回的远程网页数据。另外，网页背景设置为透明色，以方便嵌入到其它网页应用中。

代码如下：

<html>
<head>
<style type="text/css" >
    span
    {
        color:silver;
        text-shadow:1px 1px 1px #000;
    }
    em
    {
        color:silver;
        text-shadow:1px 1px 1px #000;
        background-color:#4169e1;
        padding:2px;
    }
</style>
</head>
<body style="background-color:transparent">
<form runat="server">
<asp:label id="_rv" style="display:none"  runat="server"></asp:label>
<div id="div1" style="display:flex;width:170px;align-items:center">
<div id="today" style="display:flex;width:50%;align-items:flex-end"></div>
<div id="tomorrow" style="display:flex;width:50%;align-items:flex-end"></div>
</div>
</form>
</body>
</html>

javascript 实现

结合 js 计算获取的 dom 对象，分析代码并截取需要的天气信息，放置到前端容器中进行显示，代码如下：

<script language="javascript">
    window.onload = function () {
        document.getelementbyid('weather-change').click();
        window.settimeout(function () {
            document.getelementbyid('weather-prov').length = 0;
            document.getelementbyid('weather-city').length = 0;
            document.getelementbyid('weather-town').length = 0;
            var newoption = new option("天津", "03");
            document.getelementbyid('weather-prov').appendchild(newoption);
            var newoption = new option("天津", "0103");
            document.getelementbyid('weather-city').appendchild(newoption);
            var newoption = new option("天津", "101030100");
            document.getelementbyid('weather-town').appendchild(newoption);
            document.queryselector("[class*='done v2']").click();
            window.settimeout(function () {
                document.getelementbyid('today').innerhtml = document.queryselector(".weathertoday").innerhtml;
                document.getelementbyid('tomorrow').innerhtml = document.queryselector(".weathertomorrow").innerhtml;
                window.parent.document.getelementbyid('desktoploading').style.display = 'none';
            }, 1000);
        }, 3000);
    }
</script>