.NET/C#获取十五日天气预报

~请叫我小祸害~

已于 2022-08-22 17:50:02 修改

阅读量1.3k

点赞数 2

分类专栏： .NET/C# 文章标签： c# .net 前端 asp.net ajax

于 2022-08-22 15:22:11 首次发布

本文链接：https://blog.csdn.net/weixin_59180442/article/details/126466185

版权

.NET/C# 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

今天来为大家提供一个获取天气的一个接口方法并且返还到页面上，通过前端代码显示出来
本次的代码量不多，完全可以直接复制粘贴
如果除了什么问题大家可以在下方评论留言！

1、首先我们要获取到天气的AP链接地址，链接地址如下，我们可以去这个网站去拿：

免费天气API，天气JSON API，不限次数获取十五天的天气预报 —技术博客

上方这个网站会会有天气的API地址并且会初步的教您如何使用 ↑

2、在上方我们拿到天气的api后，网站里还会给我们提供哥哥城市的一个ID我们查找是通过ID来查找的，当然也可以转换成名字大家可以自己转换。下面这个链接是上面那个网站里面给咱提供的城市数据：大家可以通过方法把数据添加到数据库中，也可以只用自己需要城市的按需求用：

城市数据：

请在百度网盘下载：链接: https://pan.baidu.com/s/1JFAwnH2MRLc5OD3hsJZwGQ 提取码: u8sk

3、我们在获取上面两个东西后我们就可以开始进行项目的编写了，下面我来教大家如何获取天气并显示：首先我们需要新建一个.net的项目。新建一个控制器咋里面添加一个index页面：index页面的内容我给大家贴在下方直接复制：

@{
    ViewBag.Title = "天气";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .laytable-cell-1-ImgUrl {
        height: 100%;
        max-width: 100%;
    }

    .xm-form-select {
        width: 180px;
    }
</style>
<div class="container mt-3">
  <h2>天气</h2>
	<form action="" id="form1" runat="server">
	  <div class="mb-3 mt-3" id="bbb">
		<label class="form-label">城市编号:</label>
        <label class="form-label"></label>
		<input type="text" class="form-control" id="city" placeholder="Enter city number" value="101030100" name="CityNumber">
	  </div>
	  <button type="button" id="obtain" class="btn btn-primary" >获取</button>
	</form><br />
    <table class="table">
       <h3 id="r" style="width:100%;text-align:center"></h3>
    <thead>
      <tr>
        <th>日期</th>
        <th>风力</th>
        <th>风向</th>
        <th>高温</th>
        <th>低温</th>
        <th>标语</th>
        <th>类型</th>
        <th>星期</th>
      </tr>
    </thead>
    <tbody id="tablelist">
      
    </tbody>
</table>
</div>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
     //跳转后左侧导航变化
     var menu = $(".Weather");
     menu.addClass("layui-this ");
     if (menu[0].tagName == 'DD') {
        menu.parent().parent().addClass("layui-nav-itemed");
    };
    $(function() {
        var codelist;
        //请求天气
        $("#obtain").click(function () {
                $.ajax({
                    url: "/Weather/GetWeatherByCity",
                    type: "get",
                    //dataType: "json",
                    data: {
                        "cityCode": $("#city").val()
                    },
                    success: function (result) {
                        $("td").remove();
                        var list = JSON.parse(result);
                        //城市
                        var city = list.cityInfo.city;
                        console.log(city);
			            console.log(list);
                        codelist = list;
                        console.log(typeof (list));
                        //console.log(codelist.data.forecast[0].high);
                        $("#r").html(city);          
                        var list1 = codelist.data.forecast;
                        console.log(list1);

                        for (var i = 0; i <= list1.length; i++) {
                            //alert(i);
                            var trs = "<tr><td>" + list.data.forecast[i].ymd 
                                + "</td><td>" + list1[i].fl 
                                + "</td><td>" + list1[i].fx
                                + "</td><td>" + list1[i].high 
                                + "</td><td>" + list1[i].low 
                                + "</td><td>" + list1[i].notice
                                + "</td><td>" + list1[i].type 
                                + "</td><td>" + list1[i].week
                                + "</td></tr>";
                            $("#tablelist").append(trs);
                        };
                        $("#codecity").html(city)
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log("错误：" + XMLHttpRequest);
                        }
                })
            })
        




    })









    

</script>

在这个里面我们采用的是动态生成表格的形式来把Ajax获取的数据进行一个展示大家可以自己随意修改样式，不用非得按照我这个来我这个只是图简单。

4、我们在写好上方index页面的前端内容后，我们接下来就需要书写控制器里面的请求方法，只需要一个方法我们就可以请求到天气大家直接复制粘贴就好：

using Core.DB.Models;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Net;

namespace Core.AdminUI.Controllers
{
    public class WeatherController
    {
        public IActionResult Index()
        {
            return View();
        }

        /// <summary>
        /// 根据城市编码获取天气json
        /// </summary>
        /// <param name="cityCode">城市编码</param>
        /// <returns>天气json</returns>
        [HttpGet]
        public string GetWeatherByCity(string cityCode)
        {
            try
            {
                //请求的时候我们需要前台给我们传递一个城市数据的ID就是我们下载的文档里面的编号
                //下方的请求连接加上要请求城市的ID编号，就可以请求到
                string url = "http://t.weather.itboy.net/api/weather/city/" + cityCode;
                System.Net.HttpWebRequest request = (System.Net.HttpWebRequest)System.Net.WebRequest.Create(url);
                request.Timeout = 10000;
                request.UserAgent = "Code Sample Web Client";
                request.Credentials = CredentialCache.DefaultCredentials;
                //HttpWebRequest 对象 获取GetResponse 转换成HttpWebResponse
                System.Net.HttpWebResponse response = request.GetResponse() as System.Net.HttpWebResponse;
                //通过HttpWebResponse response.GetResponseStream()获取输出流
                System.IO.Stream str = response.GetResponseStream();
                System.IO.StreamReader reader = new System.IO.StreamReader(str, System.Text.Encoding.GetEncoding("utf-8"));
                string weathhtml = reader.ReadToEnd();
                str.Close();
                reader.Close();
                return weathhtml;
            }
            catch (Exception)
            {
                return "请求异常";
            }
        }



    }
}

大家切记一定要在下载的文档中输入有效的编号ID！！！

5、最终运行效果就是如下图所致：