使用ajax实现查询天气

最新推荐文章于 2022-02-12 22:12:11 发布

原创

最新推荐文章于 2022-02-12 22:12:11 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #ajax #自动查询天气 #css

本文介绍了如何使用Ajax技术来实现动态查询天气的功能。通过代码示例展示了Ajax请求的过程，强调了代码的参考性质，并指出查询天气可以采用不同的API接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用ajax实现查询天气

之前做的项目，发布到网上，如果有一样的，那应该是巧合吧

代码块

<html>
<meta charset="UTF-8">
		<title>天气预报</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script>
			$(function(){
				$("#ajaxs").on('click',function(){
					var values = $("#btn1").val();//获取用户输入的城市
					//alert(values);
					if(values == ""){
						alert("输入不能为空");
						return
					}
					$.ajax({
						type:'GET',
						dataType:'jsonp',
						jsonp:'callback',
						jsonpCallback:'test',
						url:'http://api.asilu.com/weather/',//接口地址
						data:{
							"city":values   //要发送给服务器的数据
						},
						success:function(datas){  //服务器返回的数据 通过参数传递给客户端
							var data = datas;   //datas 就是服务器返回的数据 
							//console.log(data);
							var str="";
							str +="<tr align='center'>";
							str +="<td>"+data.city+"</td>";
							str +="<td>"+data.weather[0].date+"<