html+jQuery+node.js实现一个简单的查询天气网页

曾经写过一篇文章使用python查询天气,是调用中国天气网的接口实现的天气查询,下面还是用该接口实现一个本地网页的天气查询。如图:
html+jQuery+node.js实现一个简单的查询天气网页_第1张图片

服务端

代码:

const http = require("http");
const url = require("url");
const querystring = require("querystring");

const server = http.createServer((req, res) => {
  let { query } = url.parse(req.url, true);
  let cityCode = query.citycode;

  let apiUrl = `http://www.weather.com.cn/data/sk/${cityCode}.html`;
    http.get(apiUrl, function(res1) {
      let jsonData = "";

      res1.on("data", function(data) {
        jsonData += data.toString("utf8");
      });

      res1.on("end", function() {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.write(jsonData);
        res.end();
      });
    });   
});

server.listen(8080);

网页端

代码:


<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Weathertitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js">script>
    <style>
        .div {position:absolute; left:50%;transform:translateX(-50%);}
        .nav h5 {display: inline-block;}
        .nav {display: inline-block;}
        .weatherinfo {width:300px;table-layout: fixed;word-break: break-all; word-wrap: break-word;text-align: center;}
    style>
head>

<body>
    <div class = "div">
        <div class = "nav">
            <h5>请选择查询地区:h5>
            <select class = "locationSelect" onChange ="onSelect(this.value)">
                <option value="101010100" selected="selected">北京option>
                <option value="101091001">邯郸option>
            select>
        div>
        <div class = "content">
            <table class = "weatherinfo" border="1" cellpadding="0" cellspacing="0">
                <caption id = "infoTitle">
                    天气信息
                caption>
                <tr>
                    <th>气温th>
                    <td id = "temp">...td>
                tr>
                <tr>
                    <th>风向th>
                    <td id = "wd">...td>
                tr>
                <tr>
                    <th>风力th>
                    <td id = "ws">...td>
                tr>
                <tr>
                    <th>相对湿度th>
                    <td id = "sd">...td>
                tr>
            table>
        div>
    div>
    <script>
        function onSelect(value){
            console.log(value);
                $.ajax({
                type: 'GET',
                url: `http://localhost:8080?citycode=${value}`,
                dataType: 'json',
                success: function (result) {
                    console.log(result.weatherinfo);
                    let weatherinfo = result.weatherinfo;
                    $("#infoTitle").text(weatherinfo.city + "的天气信息");
                    $("#temp").text(weatherinfo.temp);
                    $("#wd").text(weatherinfo.WD);
                    $("#ws").text(weatherinfo.WS);
                    $("#sd").text(weatherinfo.SD);
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }

        onSelect($(".locationSelect").find("option:selected").val());
    script>
body>

html>

你可能感兴趣的:(node.js,js)