任务：利用中国天气网的公开接口，实现天气预报的查询功能

实验的功能要求如下：

（1）当网页加载时，根据所给的 json 数据解析获得省（直辖市）的信息并显示在下拉列表框中供用户选择；

（2）当用户选择某个省（直辖市），在第二个下拉列表框中显示所有的城市（地区）信息；

（3）当用户选择了某个城市（地区），查询最近 15 天的天气预报信息并在表格中显示。

主要代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>天气查询</title>

<script type="text/javascript" src="citydata.js"></script> //数据比较大，无法上传

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script type="text/javascript">

    function getPro()

    {

        $("#pro").html("");

        for(i=0;i<cityData.length;i++)

        {

            if(cityData[i].pid==0)

            {

                $("#pro").append('<option value="'+cityData[i].id+'">'+cityData[i].city_name+'</option>');

            }

        }

        getCity($("#pro").val());

    }

    function getCity(pid)

    {

        $("#ThisPro").html($("#pro option:selected").text());

        $("#ThisCity").html("");

        $("#city").html("");

        var flag=false;

        for(i=0;i<cityData.length;i++)

        {

            if(cityData[i].pid==pid)

            {

                flag=true;

                $("#city").append('<option value="'+cityData[i].city_code+'">'+cityData[i].city_name+'</option>');

            }

        }

        if(!flag)

        {

            for(i=0;i<cityData.length;i++)

            {

                if(cityData[i].id==pid)

                {

                    $("#city").append('<option value="'+cityData[i].city_code+'">'+$("#pro option:selected").text()+'</option>');

                    break;

                }

            }

        }

        queryWeatherInfo($("#city").val());

    }

    function queryWeatherInfo(city_code)

    {

        var url="http://www.class-space.cn/weather/query?cityCode="+city_code;

        $("#ThisCity").text($("#city option:selected").text());

        $.get(url,function(result,status,xhr)

                {

                    if(status=="success")

                    {

                        var forecast=result.data.forecast;

                        var msg="";

                        for(i=0;i<forecast.length;i++)

                            {

                                msg+="<tr align='center'>";

                                msg+="<td>"+forecast[i].ymd+"</td>";

                                msg+="<td>"+forecast[i].type+"</td>";

                                msg+="<td>"+forecast[i].low.slice(3,6)+"</td>";

                                msg+="<td>"+forecast[i].high.slice(3,6)+"</td>";

                                msg+="<td>"+forecast[i].fx+"</td>";

                                msg+="<td>"+forecast[i].fl+"</td>";

                                msg+="<td>"+forecast[i].sunrise+"</td>";

                                msg+="<td>"+forecast[i].notice+"</td>";

                                msg+="</tr>";

                            }

                        $("#WeatherLoadList").html(msg);

                    }

                });

    }

</script>

</head>

<body>

    <div id="contain">

        <p>请选择需要查询的城市或信息</p>

        <br>

        <div>

            省（直辖市）:

            <select id="pro"></select>

            城市（地区）:

            <select id="city"></select>

        </div>

        <hr>

        <div>

        <span class="lead" id="ThisPro" style="color:red;font-size:30px;"></span>

        <span id="ThisCity" ></span>

        </div>

        <br>

        <table class="table table-striped table-hover">

            <thead>

                <tr align="center">

                    <th scope="col">日期</th>

                    <th scope="col">天气情况</th>

                    <th scope="col">最低温度</th>

                    <th scope="col">最高温度</th>

                    <th scope="col">风向</th>

                    <th scope="col">风速</th>

                    <th scope="col">日出时间</th>

                    <th scope="col">提示</th>

                </tr>

            </thead>

            <tbody id="WeatherLoadList"></tbody>

        </table>

    </div>

    <script>

            $(document).ready(function(){

                    getPro();

                    $("#pro").change(function()

                    {

                        getCity(this.value);

                    });

                    $("#city").change(function(){

                        queryWeatherInfo(this.value)

                    });

            });

    </script>

</body>

</html>

【城市天气】使用Ajax发送和接受数据的更多相关文章

  1. JavaScript实现ajax发送表单数据

    知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...

  2. NSStream实现发送和接受数据

    一.基本概念在iOS中以NSStream(流)来发送和接收数据,可以设置流的代理,对流状态的变化做出相应.1连接建立2接收到数据3连接关闭NSStream:数据流的父类,用于定义抽象特性,例如:打开. ...

  3. XMPP框架下微信项目总结（7）聊天通信处理-发送，接受数据

    前言:通其他的功能处理一样,聊天也是通过模块发起的成为:“消息模块” 原理:1 current客户端开启通过消息模块开启并监听消息(监听通过代理). 2 当“current客户端”收到来自“other ...

  4. 兼容ie7到ie11,edge,chrome,firefox的ajax发送接收post数据代码

    /* * 生成XMLHttpRequest */ function getxhr() { //获取ajax对象 var xhr = null; try { xhr = new XDomainReque ...

  5. Python-定时爬取指定城市天气(一)-发送给关心的微信好友

    一.背景 上班的日子总是3点一线,家里,公司和上班的路径,对于一个特别懒得我来说,经常遇到上班路上下雨了,而我却没带伞,多么痛的领悟.最近对python有一种狂热的学习热情,写了4年多的C++代码,对 ...

  6. Django进阶（路由系统、中间件、缓存、Cookie和Session、Ajax发送数据

    路由系统 1.每个路由规则对应一个view中的函数 url(r'^index/(\d*)', views.index), url(r'^manage/(?P<name>\w*)/(?P&l ...

  7. Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据

    前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...

  8. ajax跨域访问数据

    通过json发送和接受数据,数据以json的格式在服务器端和前台进行传递,什么是json数据?这里就不进行详细阐述,轻自行百度解决. 在html5 中利用ajax 异步请求时,会遇到跨域的问题,如果域 ...

  9. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

随机推荐

  1. Linux 中mysql安装（源码安装方式）

    本文是介绍以源码安装的方式编译和安装Mysql 5.6(可以指定安装路径),也可以不采用源码安装方式,直接用安装包的方式. 源码安装方式慎用,容易报错. 1.卸载旧版本 rpm -qa | grep ...

  2. linux 1-常用命令

    文件处理命令: 命令格式:命令 [-选项] [参数] 例如:ls -la /etc   多个选项可以写在一起,不区分前后关系,例如 -l 和 -a 一起写成 -la 目录处理命令:ls (就是list ...

  3. PHP清除数组中有字符串空格的方法

    清除数组中字符串有空格的方法函数 function TrimArray($arr){ if (!is_array($arr)){ return $arr; } while (list($key, $v ...

  4. spring Boot 学习（七、Spring Boot与开发热部署）

    一.热部署在开发中我们修改一个Java文件后想看到效果不得不重启应用,这导致大量时间 花费,我们希望不重启应用的情况下,程序可以自动部署(热部署).有以下四 种情况,如何能实现热部署.•1.模板引擎 ...

  5. react 使用的小建议

    使用pureRender,setState和Immutable.js来操作state Immutable 中文意思不可变. 不能直接修改state的值,要用setState 和Immutable re ...

  6. Java自学-面向对象 类和对象

    Java中的类和对象 引入面向对象的基本概念 假设,我们要设计一个LOL这样的游戏,使用面向对象的思想来设计,应该怎么做? 步骤 1 : 设计英雄这个类 LOL有很多英雄,比如盲僧,团战可以输,提莫必 ...

  7. 【开发笔记】-MySQL数据库5.7+版本，编码格式设置

    原因 昨天不小心把数据库搞崩了,重装了5.7.27版本得mysql数据库,在安装过程中并没有设置数据库默认编码格式等操作.在把项目启动后,jpa自动创建表结构,会把数据库,表,字段的编码自动设置为IS ...

  8. JavaScript 流程控制（二）循环结构

    一.while 语句 语法结构: 声明循环变量:while (循环条件) { //循环体 // 迭代条件 } 当循环条件为 true 时,执行循环体:当循环条件为false时,结束循环. 二.do.. ...

  9. linux-ifconfig 查看没有IP

    ifconfig 查看没有IP,如图: 解决方法: 1.切换路径到 2.进入编辑ifcfg-ens33文件(文件名可能不同)模式 3.ONBOOT改为yes 4.点击ESC,输入:wq进行保存 5.输 ...

  10. mysql 5.7.25中ibtmp1文件过大

    问题描述 生产环境linux suse11.4, 根目录/ 下大小:50G, ibtmp1大小:31G, 磁盘空间爆满100%告警. ibtmp1文件说明 ibtmp1是非压缩的innodb临时表的独 ...