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

实验的功能要求如下:

(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. 13. Scala函数式编程(高级部分)

    13.1 偏函数(partial function) 13.1.1 需求 -> 思考 一个集合val list = List(1,2,3,4,"abc"),完成如下要求 1) ...

  2. English--动名词

    English|动名词 开始动名词的学习,代表着在长难句的征途上又向前迈出了一步. 前言 目前所有的文章思想格式都是:知识+情感. 知识:对于所有的知识点的描述.力求不含任何的自我感情色彩. 情感:用 ...

  3. 【题解】Luogu P5468 [NOI2019]回家路线

    原题传送门 前置芝士:斜率优化 不会的可以去杜神博客学 这道题我考场上只会拆点跑最短路的70pts做法 后来回家后发现错误的爆搜都能拿满分(刀片) 还有很多人\(O(mt)\)过的,还是要坚持写正解好 ...

  4. delegate、Action、Func的用法

    委托的特点 委托类似于 C++ 函数指针,但它们是类型安全的. 委托允许将方法作为参数进行传递. 委托可用于定义回调方法. 委托可以链接在一起. delegate的用法 delegate void B ...

  5. Object-C与标准C/C++混合编程

    转自:http://www.xue5.com/Mobile/iOS/661674.html 如何将C++和Object-C混合编程开发IOS软件(Object-c调用C++) 原文网址:http:// ...

  6. 字符串转换成float和double类型

    double strtod(const char *nptr, char **endptr); float strtof(const char *nptr, char **endptr); long ...

  7. 一步一步实现kbmmw的httpsys使用https功能

    kbmmw的httpsys的功能已经实现了好长时间,但是现在各个平台都要求使用https来提供服务. 今天一步一步来说一下如何使用kbmmw 的httpsys功能支持https. 首先为了获得证书,我 ...

  8. 在线java堆栈分析工具

    1:工具地址  https://gceasy.io/ft-dashboard-web.jsp 2:在线分析结果       

  9. Java8新特性。

    常用函数接口: 函数式接口: 函数式接口在Java中是指:有且仅有一个抽象方法的接口(可以含其他方法). 而Java中的函数式编程的体现就是Lambda. @FunctionalInterface 注 ...

  10. mysql字符串截取函数和日期函数

    注:mysql下标索引从1开始,并包含开始索引 1.left(str,len) index<=0,返回空 index>0,截取最左边len个字符 select ), ), ), )  结果 ...