网页前端天气请求

最新推荐文章于 2023-06-27 15:03:23 发布

ashxjdn

最新推荐文章于 2023-06-27 15:03:23 发布

阅读量123

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_58627980/article/details/123164383

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天气查询</title>
	</head>
	<body>
		
		<form id="myform" name="myform" action="" method="get">
		<input type="text" name="tianqi" id="tianqi" placeholder="请输入城市：" />
		<button type="button" onclick="checkon()">查询</button><br>
		</form>
		<p id="p1"></p>
	</body>
	<script type="text/javascript">
		function checkon(){
			var uname = document.getElementById("tianqi").value;
			console.log(uname);
			if(uname == "南京"){
				selectedform1();
			}else{
				alert("输入的信息有误请重新输入！");
			}
		}
		
		function selectedform1(){
			//得到XMLHttpRequest对象
			var xhr = new XMLHttpRequest();
			//打开请求
			xhr.open("GET","https://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&location=南京&language=zh-Hans&unit=c",false);
			//发送请求
			xhr.send(null);
			//接收响应
			if(xhr.status == 200){
				console.log(xhr.responseText);
				var str = JSON.stringify(xhr.responseText);
			}else{
				console.log("状态码：" + xhr.status + "原因：" +xhr.responseText);
			}
			document.getElementById("p1").innerHTML = xhr.responseText;
		}
	</script>
</html>

ashxjdn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页前端天气请求

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>天气查询</title> </head> <body> <form id="myform" name="myform" action="" method="get"> <input type="text" name="tianqi" id="tian
复制链接

扫一扫