Ajax请求数据返回天气预报和API接口的获取_怎么在js中利用ajax获取天气信息-程序员宅基地

JS获取天气预报信息，获取当前位置ip地址的天气预报信息以及API接口

代码的运行视频在这里哦

HTML代码：

<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" />
		<center>
			<title>天知道</title>
		</center>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<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" class="input_txt" placeholder="请输入查询的天气" />
					<button class="input_sub" onclick="sendAjax()">
						搜 索
					</button>
				</div>
				<div class="hotkey">
					<a href="javascript:;">北京</a>
					<a href="javascript:;">上海</a>
					<a href="javascript:;">广州</a>
					<a href="javascript:;">深圳</a>
				</div>
			</div>
			<ul class="weather_list" id="myUL">
				<!-- {
					"date": "25日星期六",
					"high": "高温 23℃",
					"fengli": "<![CDATA[2级]]>",
					"low": "低温 20℃",
					"fengxiang": "西风",
					"type": "小雨"
				} -->
				<li>
					<div class="info_type"><span class="iconfont">小雨</span></div>
					<div class="info_temp">
						<b>低温 20℃</b>
						~
						<b>高温 23℃</b>
					</div>
					<div class="info_date"><span>27日星期一</span></div>
				</li>
			</ul>
		</div>

	</body>

JS代码：首先我们应当先输入想要查询的城市，让网页链接+城市名称返回给后台第一时间加载，从而获取到我们当前所处的具体天气预报信息。给后台发送Ajax请求。

function sendAjax() {
		var cityName = document.getElementById("city").value.trim();
		if (!cityName) {
			alert("请输入一个城市")
			return
		}
		//alert(cityName);
		var xmlhttp;
		xmlhttp = new XMLHttpRequest();
		//2.向服务器发送请求
		//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
		//3.发送请求
		/* 
		method：请求的类型；GET 或 POST 
		url：文件在服务器上的位置 ，后台接口地址
		async：true（异步）或 false（同步） */

		xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + cityName, true);
		xmlhttp.send();
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//4.如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText;
				var jsonStr = xmlhttp.responseText;
				//console.log(jsonStr);
				//把JSON字符串，解析成JSON对象
				var obj = JSON.parse(jsonStr);
				var yest=obj.data.yesterday;
				var arr = obj.data.forecast;
				//console.log(arr);
				showData(yest,arr);
			}
		}
	}

展示当前天气预报信息，还可以通过重新输入城市来获取别的天气预报信息。

function showData(yest,arr) {
		//console.log(arr);
		var myUL = document.getElementById("myUL");
		//获取昨天的天气预报信息
		var liStr=
				`<li>
					<div class="info_type"><span class="iconfont">${yest.type}</span></div>
					<div class="info_temp">
						<b>${yest.low}</b>
						~
						<b>${yest.high}</b>
						
						<b>东风</b>
						
					<div>
					<div class="info_date"><span>${yest.date}</span></div>
				</li>` +"";
		for (var i = 0; i < arr.length; i++) {
			var json = arr[i];
			//console.log(json);
			//获取后面5天的天气预报信息
			liStr +=
				`<li>
					<div class="info_type"><span class="iconfont">${json.type}</span></div>
					<div class="info_temp">
						<b>${json.low}</b>
						~
						<b>${json.high}</b>
						
						<b>${json.fengxiang}</b>
						
						
					</div>
					<div class="info_date"><span>${json.date}</span></div>
				</li>`;
		}
		myUL.innerHTML = liStr;
	}

以上就是我们可以通过API接口获取当前天气的预报信息，以后更换城市之后更新天气预报信息，主要涉及Ajax的异步请求，同源策略和跨域的问题，我们采用jsonp实现跨域，jsonp在浏览器中创建script标签，不会受到同源策略的影响，可以实现不同源跨域获取服务器数据。

本文链接：https://blog.csdn.net/weixin_45447369/article/details/107627683

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

这个ChatGPT项目有了重大更新，可以直接打包成桌面应用_chatgpt_jcm-程序员宅基地

文章浏览阅读3.7k次，点赞3次，收藏11次。如果，想获取更多精彩的内容可以关注我的公众号。构建完成后，可以使用以下命令运行镜像，其中 "my-container" 是您想要给容器取的名称。的接口，需要魔法上网才可以，所以，构建了桌面应用后，我们需要进行魔法上网才可以正常使用。外观上也作出了改变，把界面做的更加简洁。采用docker方式部署，前提是服务器的环境已经正确的安全了。进行桌面应用的构建，目前，国内也不能直接调用。好了，废话不多说，下面简单介绍一下部署方法。项目，最近这个仓库有了重大的更新，可以把。是您想要给镜像取的名称，"." 表示。_chatgpt_jcm

spring注解@ControllerAdvice的原理分析和使用_controlleradvice原理-程序员宅基地

文章浏览阅读1w次，点赞10次，收藏17次。@ControllerAdvice注解是Spring3.2中新增的注解，学名是Controller增强器，作用是给Controller控制器添加统一的操作或处理。对于@ControllerAdvice，我们比较熟知的用法是结合@ExceptionHandler用于全局异常的处理，但其作用不止于此。ControllerAdvice拆开来就是Controller Advice，关于Advice，在Spring的AOP中，是用来封装一个切面所有属性的，包括切入点和需要织入的切面逻辑。这里ControllerA_controlleradvice原理

改善侧滑菜单Fragment切换速度（解决Fragment切换加载慢的问题）_new fragment有点慢-程序员宅基地

文章浏览阅读3.9k次。1.现状：在做项目的时候很多时候需要使用侧滑菜单。侧滑菜单项一般都是用Fragment。一般设计上是在Home page的layout中使用FrameLayout 作为一个container 如：content_main.xml

在Google使用Borg进行大规模集群的管理 7-8-程序员宅基地

文章浏览阅读606次。为什么80%的码农都做不了架构师？>>> ..._google trace batch job

python加密字符串小写字母循环后错两位_python学习：实现将字符串进行加密-程序员宅基地

文章浏览阅读2.6k次，点赞3次，收藏3次。'''题目描述1、对输入的字符串进行加解密，并输出。2加密方法为：当内容是英文字母时则用该英文字母的后一个字母替换，同时字母变换大小写,如字母a时则替换为B；字母Z时则替换为a；当内容是数字时则把该数字加1，如0替换1，1替换2，9替换0；其他字符不做变化。s'''#-*-coding:utf-8-*-importre#判断是否是字母defisLetter(letter):iflen..._编写函数fun2实现字符串加密,加密规则为:如果是字母,将其进行大小写转换;如果

【Java容器源码】集合应用总结：迭代器&批量操作&线程安全问题_迭代器是否可以保证容器删除和修改安全操作-程序员宅基地

文章浏览阅读4.4k次，点赞6次，收藏8次。下面列出了所有集合的类图：每个接口做的事情非常明确，比如 Serializable，只负责序列化，Cloneable 只负责拷贝，Map 只负责定义 Map 的接口，整个图看起来虽然接口众多，但职责都很清晰；复杂功能通过接口的继承来实现，比如 ArrayList 通过实现了 Serializable、Cloneable、RandomAccess、AbstractList、List 等接口，从而拥有了序列化、拷贝、对数组各种操作定义等各种功能；上述类图只能看见继承的关系，组合的关系还看不出来，比如说_迭代器是否可以保证容器删除和修改安全操作