【城市天气】使用Ajax发送和接受数据
任务:利用中国天气网的公开接口,实现天气预报的查询功能
实验的功能要求如下:
(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发送和接受数据的更多相关文章
- JavaScript实现ajax发送表单数据
知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...
- NSStream实现发送和接受数据
一.基本概念在iOS中以NSStream(流)来发送和接收数据,可以设置流的代理,对流状态的变化做出相应.1连接建立2接收到数据3连接关闭NSStream:数据流的父类,用于定义抽象特性,例如:打开. ...
- XMPP框架下微信项目总结(7)聊天通信处理-发送,接受数据
前言:通其他的功能处理一样,聊天也是通过模块发起的成为:“消息模块” 原理:1 current客户端开启通过消息模块开启并监听消息(监听通过代理). 2 当“current客户端”收到来自“other ...
- 兼容ie7到ie11,edge,chrome,firefox的ajax发送接收post数据代码
/* * 生成XMLHttpRequest */ function getxhr() { //获取ajax对象 var xhr = null; try { xhr = new XDomainReque ...
- Python-定时爬取指定城市天气(一)-发送给关心的微信好友
一.背景 上班的日子总是3点一线,家里,公司和上班的路径,对于一个特别懒得我来说,经常遇到上班路上下雨了,而我却没带伞,多么痛的领悟.最近对python有一种狂热的学习热情,写了4年多的C++代码,对 ...
- Django进阶(路由系统、中间件、缓存、Cookie和Session、Ajax发送数据
路由系统 1.每个路由规则对应一个view中的函数 url(r'^index/(\d*)', views.index), url(r'^manage/(?P<name>\w*)/(?P&l ...
- Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据
前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...
- ajax跨域访问数据
通过json发送和接受数据,数据以json的格式在服务器端和前台进行传递,什么是json数据?这里就不进行详细阐述,轻自行百度解决. 在html5 中利用ajax 异步请求时,会遇到跨域的问题,如果域 ...
- Django学习——ajax发送其他请求、上传文件(ajax和form两种方式)、ajax上传json格式、 Django内置序列化(了解)、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
随机推荐
- 小知识点 之 JVM -XX:SurvivorRatio
JVM参数之-XX:SurvivorRatio 最近面试过程中遇到一些问JVM参数的,本着没用过去学习的办法看了些博客写得不准确,参考oracle的文档记录一下,争取每天记录一点知识点 -XX:Sur ...
- 启动Sonar报错,ERROR: [1] bootstrap checks failed [1]: system call filters failed to install
错误提示信息: ERROR: [1] bootstrap checks failed[1]: system call filters failed to install; check the logs ...
- Implementing Azure AD Single Sign-Out in ASP.NET Core(转载)
Let's start with a scenario. Bob the user has logged in to your ASP.NET Core application through Azu ...
- Tigase XMPP Server
Tigase XMPP Server是我们的旗舰服务器端软件,提供XMPP服务或实例通信(IC)服务.最基本的解释是Tigase是一个聊天服务器,但它远不止于此.聊天是其可能的应用程序之一,但任何类型 ...
- Python3.x--33个保留字
查询方法也在下图:
- Java自学-类和对象 枚举类型
枚举类型 步骤 1 : 预先定义的常量 枚举enum是一种特殊的类(还是类),使用枚举可以很方便的定义常量 比如设计一个枚举类型 季节,里面有4种常量 public enum Season { SPR ...
- 用axios.all处理并发请求
如果我们需用在两个接口同时完成后,然后在执行一些逻辑,我们可以使用axios.all处理并发请求,如下所示: function getUserAccount() { return axios.get( ...
- [摘录]flutter打包后无法访问接口
打开文件{{flutterPorject}}\android\app\src\main\AndroidManifest.xml这个文件增加权限信息: <uses-permission andro ...
- iOS 视图调用
init-初始化程序 viewDidLoad-加载视图 viewWillAppear-UIViewController对象的视图即将加入窗口时调用: viewDidApper-UIViewContro ...
- Kafka Streams开发入门(4)
背景 上一篇演示了filter操作算子的用法.今天展示一下如何根据不同的条件谓词(Predicate)将一个消息流实时地进行分流,划分成多个新的消息流,即所谓的流split.有的时候我们想要对消息流中 ...