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


jQuery表单输入城市查询天气预报特效代码下载
jQuery表单输入城市查询天气预报特效代码下载以及表单输入、城市查询、天气预报等js/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>

相关推荐

发表评论

相关文章