jQuery表单输入城市查询天气预报特效代码下载

jQuery表单输入城市查询天气预报特效代码下载

1. 引入JS

<script src="jquery.min.js"></script>
<script src="template-native.js"></script>

2. HTML代码

<center><input  type="text" id="cityName"  placeholder="请输入城市"  >  <input type="button" value="查询天气">
<script type="text/javascript">
		$("input[type=button]").on("click",function(){
				var cityName=document.querySelector("#cityName").value;
				//跨域是浏览器的安全策略.
				//我现在是jQuery ,jQuery 怎么去解决
				//jQuery 解决的方式.
				$.ajax({
						url:"http://api.map.baidu.com/telematics/v3/weather",
						type:"get",
						data:{
							  location:cityName,
							  output:'json',
							  ak:'6tYzTvGZSOpYB5Oc2YGGOKt8'
						},
						/*预期服务器端返回的数据类型,假设我现在跨域了,我就改成jsonp 就可以了 */
					dataType:"jsonp",
					success:function(data){
						console.log(data)
						//百度那边的 数据已经回来,我现在要解析这个数据.
						var weatherData=data.results[0].weather_data;
						var obj={
							list:weatherData
						}
						var html=template("templateId",obj);
						document.querySelector("table").innerHTML=html;
					}
				})
		})
</script>
<table></table>
</center>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到