DOM及AJAX实现天气预报查询

最新推荐文章于 2021-07-29 13:04:40 发布
最新推荐文章于 2021-07-29 13:04:40 发布
阅读量481 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48967079/article/details/108713387
版权

DOM及AJAX实现天气预报查询

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>我爱你</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body onkeypress="goSky(event)">
		<div class="wrap" id="app" >
			<div class="search_form">
				<div class="logo"><img src="img/logo.png" alt="logo" /></div>
				<div class="form_group">
					<input type="text" id="city" name="mycity" value="" class="input_txt" placeholder="请输入查询的天气" />
					<button class="input_sub" onclick="sendAjax()" >
						搜 索
					</button>
				</div>
				<div class="hotkey">
					<a href="javascript:; " onclick="GetBj()" id="bj">西安</a>
					<a href="javascript:;" onclick="GetSS()" id="ss">榆林</a>
					<a href="javascript:;"  onclick="GetGZ()" id="gz">铜川</a>
					<a href="javascript:;"  onclick="GetSZ()" id="sz">长春</a>
				</div>
			</div>
			<ul class="weather_list" id="myUL">
				<!-- <li v-for="item in weatherList">
					<div class="info_type"><span class="iconfont">晴</span></div>
					<div class="info_temp">
						<b>低温 16℃</b>
						~
						<b>高温 30℃</b>
					</div>
					<div class="info_date"><span>18日星期五</span></div>
				</li>
				 -->
			</ul>
		</div>

	</body>

</html>
<script type="text/javascript">
	//创建Ajax请求对象
	var xmlhttp = new XMLHttpRequest();

	function sendAjax() {
		//发送Ajax请求
		//alert("发送请求");
		var cityName = document.getElementById("city").value;
		//alert(cityName);
		if (!cityName) {
			alert("请输入一个城市名")
			return;
		}
		if (cityName.length < 2) {
			alert("请输入一个有效城市名")
			return;
		}
	
		//发送Ajax请求
		// http://wthrcdn.etouch.cn/weather_mini?city=商洛
		xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + cityName, true);
		xmlhttp.send();

		//接收服务器的响应
		// 在 onreadystatechange 事件中， 我们规定当服务器响应已做好被处理的准备时所执行的任务。

		// 当 readyState 等于 4 且状态为 200 时， 表示响应已就绪：

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var jsonStr = xmlhttp.responseText;
				//把json字符串转换成JSON对象
				var jsonObj = JSON.parse(jsonStr);
				//解析JSON
				showData(jsonObj);
			}
		}
	}
	var myUL=document.getElementById("myUL");
	function showData(jsonObj) {
		var arr = jsonObj.data.forecast;
		var yes=jsonObj.data.yesterday;
		
		//console.log(arr);
		var strli='';
		for(var i=0;i<arr.length;i++){
			var obj=arr[i];
			strli+=`<li v-for="item in weatherList">
					<div class="info_type"><span class="iconfont">${obj.type}</span></div>
					<div class="info_temp">
						<b>${obj.low}</b>
						~
						<b>${obj.high}</b>
					</div>
					<div class="info_date"><span>${obj.date}</span></div>
				</li>`;
		}
	  var str=`<li v-for="item in weatherList">
					<div class="info_type"><span class="iconfont">${yes.type}</span></div>
					<div class="info_temp">
						<b>${yes.low}</b>
						~
						<b>${yes.high}</b>
					</div>
					<div class="info_date"><span>${yes.date}</span></div>
				</li>`;
        myUL.innerHTML=str+strli;
		/* x=strli; */
	}
	function GetBj(){
	  var bj=	document.getElementById("bj");
	   bjText=bj.innerText;
	   getDay(bjText);
	}function GetSS(){
		var bj=	document.getElementById("ss");
		 bjText=bj.innerText;
		 getDay(bjText);
	}
	function GetGZ(){
		var bj=	document.getElementById("gz");
		 bjText=bj.innerText;
		 getDay(bjText);
	}
	function GetSZ(){
		var bj=	document.getElementById("sz");
		 bjText=bj.innerText;
		 getDay(bjText);
	}
	function getDay(cityName){
		xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + cityName, true);
		xmlhttp.send();
		
		//接收服务器的响应
		// 在 onreadystatechange 事件中， 我们规定当服务器响应已做好被处理的准备时所执行的任务。
		
		// 当 readyState 等于 4 且状态为 200 时， 表示响应已就绪：
		
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var jsonStr = xmlhttp.responseText;
				//把json字符串转换成JSON对象
				var jsonObj = JSON.parse(jsonStr);
				//解析JSON
				showData(jsonObj);
			}
		}
	}
	function goSky(e){
	/* 	alert(e.keyCode); */
	if(e.keyCode==13){
		sendAjax();
	}
		}
</script>

在这里插入图片描述

一位不透露姓名的先生
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AJAX天气预报前台
10-31
总结来说，这个AJAX天气预报前台应用展示了如何利用AJAX技术和JavaScript进行异步数据交互，实现实时更新天气信息的功能。它涉及到DOM操作、事件处理、异步请求以及状态监控等多个前端开发的关键技能。
Ajax 天气预报API案例
最新发布
m0_64355119的博客
05-09 535
【代码】Ajax 天气预报API案例。
利用AJAX做天气预报
weixin_47250504的博客
06-27 2565
天气预报一、添加Jquery事件、方法二、HTML主体部分三、运行结果 上一周我们初步学习了AJAX的概念。 这一周我们可以利用AJAX尝试着做一个天气预报界面。 一、添加Jquery事件、方法 document.addEventListener('plusready', function(){}); $(document).ready(function() { $("button").click(function() { var city = $("#city").val();
关于Ajax查询天气的经典案例（利用模板引擎）代码全讲解
zhixuejia的博客
07-29 765
主要思路：分析我们要干的事 1.首先引入模板引擎、JQ文件 2.搭建html页面 3.给button绑定事件 1.首先我们获取到输入框的值 2.然后引入Ajax($.ajax({})) 3.给url地址 4.给服务器传输数据 5.期望返回值为json 6.成功后获取返回值打印出来观察数据格式那部分是我们想要的 7.定义模板引擎在里面写好我们期望的代码格式并对数据进行遍历 8.引用引擎模板将其给到html页面 <!DOCTYPE...
原生js、Ajax编写一个天气预报，搜索查询
weixin_43400431的博客
08-03 3185
今天分享的是Ajax，使用Ajax的步骤： 1、创建对象 2、创建请求 3、发送请求参数 4、接收响应 接下来是准备工作，可以搜索高德地图开放平台-Web服务API-天气查询。 天气查询是一个简单的HTTP接口，根据用户输入的adcode，查询目标区域当前/未来的天气情况。 使用API前您需先申请Key，若无高德地图API账号需要先申请账号。 里面有请求方式和参数，key是要自己申请的 好的，到这里就开始上代码了咯 HTML： <html> <head> <meta
使用ajax实现查询天气
qq_42384228的博客
09-01 986
使用ajax实现查询天气 之前做的项目，发布到网上，如果有一样的，那应该是巧合吧 代码块 &lt;html&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;天气预报&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-3.
PHP+AJAX无刷新实现返回天气预报数据
12-04
通过以上步骤，我们能理解如何利用PHP和AJAX实现无刷新的天气预报查询功能。这个系统允许用户动态地选择城市，而无需刷新整个页面，提高了用户体验。同时，它还演示了如何处理API数据、发起网络请求以及在客户端更新...
jQuery天气预报API查询特效代码
03-20
jQuery天气预报API查询特效代码是基于JavaScript库jQuery实现的一款实用工具，它允许开发者轻松地在网页上集成实时天气信息。这个API查询代码的核心是通过与天气预报服务提供商的接口进行通信，获取到指定地点的天气...
domino ajax 天气预报
02-25
【描述】：“之前写了一个CS报表的天气预报，现在上传一个BS版本的1)jquery+ajax实现” 这里的描述提到了两种不同类型的天气预报系统：CS（Client-Side）报表和BS（Browser-Side）报表。CS报表通常是在客户端应用...
Ajax 通过城市名获取数据(全国天气预报API)
10-21
在这个场景中，它被用来实现一个全国天气预报的功能，用户输入城市名，系统就能实时显示该城市的天气信息。 全国天气预报API是由聚合数据提供的，接口地址为`http://v.juhe.cn/weather/index`，支持JSON和XML格式的...
Ajax天气预报案例（使用模板引擎渲染）.zip
03-23
jquery中Ajax的使用，跨域使用接口查询各地天气预报，详细流程注释，简单易懂，以及模板引擎templ-web的简单运营，免去拼接字符串的繁琐-（需要修改接口appkey后才能使用）
js 获取天气预报
04-01
NULL 博文链接：https://jiachenmianyu.iteye.com/blog/1409443
天气预报代码各种样式
05-06
各种天气预报的样式jsp和html啊啊啊啊啊
Ajax之实时天气预报源码
02-04
Ajax之实时天气预报源码（Ajax之实时天气预报源码）
ajax实现的天气预报
Alison1996的博客
12-22 874
<!DOCTYPE html> <html> <head> <title>ajax</title> </head> <body> <h1>天气查询</h1> <input type="text" placeholder=...
Ajax的封装，以及利用jquery的ajax获取天气预报
weixin_30757793的博客
11-22 656
1、Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型，第二个参数是传入open的url，第三个是用来操作post和get的参数，　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//第四个参数是同步或异步，第五个是后台传过来的数据类型，第六个是对界面进行操作的函...
ajax查询全国天气预报，使用聚合数据api接口
weixin_43416215的博客
10-04 1454
空值情况 苏州 界面如上，可以根据自己需求再添加一些内容。 功能需求：根据城市名称查询该城市的天气情况，输入空值的时候默认查询北京天气 这个是我使用聚合数据提供的免费20次请求全国天气预报API，注册了，申请使用了就会获得一个key值 实现代码如下： jquery.min.js、template-web.js需要引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
JS异步Ajax请求查看天气预报小案例
qq_44241861的博客
10-17 1416
异步Ajax请求查看天气预报小案例 需要一个天气预报的后台接口：http://wthrcdn.etouch.cn/weather_mini?city=XX 通过Ajax访问后台 获取后台数据 后台JSON数据格式的解析读取操作 动态添加多个嵌套样式标签展示到前台时，采用字符串拼接与变量替换的方法 `$(变量名)` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> &l
AJAX开发入门与实战指南
许多大型网站和应用程序都采用了AJAX技术，比如Google Maps、Gmail、Twitter等，它们利用AJAX实现了实时搜索、动态加载和无缝交互。 五、AJAX改进设计示例 1. 数据校验：利用AJAX在表单提交前验证输入，即时反馈...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值