JQuery的简单入门(二)_ajax jquery 高德天气-优快云博客

本文链接：https://blog.youkuaiyun.com/jsaber/article/details/79147603

本文介绍了JQuery如何轻松解决AJAX跨域问题，并通过实例展示了利用高德天气API获取并展示天气信息的过程。

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

JQuery解决了AJAX的跨域问题

利用高德天气测试天气

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	$(function(){
		$("input[type='button']").click(function(){
			var addcode=$("#addCode").val();
			var url="http://restapi.amap.com/v3/weather/weatherInfo?key=a1a09a151cf59c39c01d5c10bfb7fbe4&city="+addcode;
			//$.ajax是$对象的一个静态方法 $.ajax=function()
			$.ajax({
				//请求的method类型
				type:"GET",
				//请求的路径
				url:url,
				//将返回的字符串转换为json对象(JSON.parse(返回字符串))
				dataType:'json',
				//请求响应的回调函数 参数1就是写回的json数据
				success:function(msg){
					var tq=msg.lives[0].weather;
					$("div").remove();
					if(tq=="晴"){
						$(document.body).append("<div><img src='as.jpg'/></div>");
					}
				}
			})
		})
	})
	</script>
  </head>
  <body>
   	<input id="addCode" type="text" value=""> <input type="button" value="天气">
  </body>
</html>

POST请求限定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	$(function(){
		$("input[type='button']").click(function(){
			var addcode=$("#addCode").val();
			var url="http://restapi.amap.com/v3/weather/weatherInfo";
			//$.ajax是$对象的一个静态方法 $.ajax=function()
			var jsonobj={
			//请求的method类型
				type:"POST",
				//请求的路径
				url:url,
				//将返回的字符串转换为json对象(JSON.parse(返回字符串))
				dataType:'json',
				//异步调用
				async:true,
				//传送的数据
				data:"key=a1a09a151cf59c39c01d5c10bfb7fbe4&city="+addcode,
				//请求响应的回调函数 参数1就是写回的json数据
				success:function(msg){
					var tq=msg.lives[0].weather;
					$("div").remove();
					if(tq=="晴"){
						$(document.body).append("<div><img src='as.jpg'/></div>");
					}
				},
				error:function(xhr,textStatus,errorThrown){
					alert(textStatus+"=="+errorThrown);
				}
			}
			$.ajax(jsonobj);
		})
		
	})
	
	</script>
  </head>
  
  <body>
   	<input id="addCode" type="text" value=""> <input type="button" value="天气">
  </body>
</html>

利用公网IP获取当前地址

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>get.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
	
	$(function(){
		$("input[type='button']").click(function(){
			var addcode=$("#addCode").val();
			var url="http://restapi.amap.com/v3/ip";
			$.get(url,"key=a1a09a151cf59c39c01d5c10bfb7fbe4&ip="+addcode,function(msg){
				var ct=msg.province;
				var ci=msg.city;
				alert("当前地址:"+ct+ci);
			});
		});
	});
	
</script>	
  </head>
  
  <body>
   		<input id="addCode" type="text" value=""> <input type="button" value="地址">
  </body>
</html>

静态方法和实例方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	$(function(){
		//静态方法
		$.extend({
			add:function(p1,p2){
				return p1+p2;
			}
		})
		alert($.add(1,5));
		//实例方法拓展
		$.fn.extend({
			value:function(){
				//this是jQuery对象
				return this.val();
			}
		})
		alert($("input[name='us']").value());
	})
	
	</script>
  </head>
  	
  <body>
   	<input type="text" name="us" value="666"/>
  </body>
</html>