jQuery-ajax-天气接口

2021/8/27 23:36:32

编程Tag： 接口 ajax jQuery css data var background str res

本文主要是介绍jQuery-ajax-天气接口，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="show" style="margin: 0 auto;width: 900px;">
		</div>
	</body>
</html>
<script src="jQuery-3.5.1.min.js"></script>
<script>
//页面加载
$(function(){
	//触发ajax
	$.ajax({
		type:"get",
		url:"http://api.k780.com/?app=weather.future&weaId=1&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json",
		dataType:"json",
		success:function(res){
			if(res.success == 1){
				var data = res.result;
				var str = "<table>";
				str += "<th>城市</th>";
				str += "<th>日期</th>";
				str += "<th>温度</th>";
				str += "<th>风向</th>";
				str += "<th>操作</th>";
				
				for(var i=0;i<data.length;i++){
					str += "<tr><td>"+data[i].citynm+"</td><td>"+data[i].days+"</td><td>"+data[i].temperature+"</td><td>"+data[i].wind+"</td><td><button class='del'>删除</button></td></tr>";
				}
				str+="</table>";
			
				$("#show").html(str);
				$("tr:odd").css('background-color','red');
				$("tr:even").css('background-color','blue');
				$("tr:eq(0)").css('background-color','');
				$("table").css('border','1px solid red');
			}else{
				console.log('接口请求失败');
			}
		}
	});
	// 删除
	
	$("#show").on('click','.del',function(){
		var res = confirm('您确定要删除吗？');
		if(res){
			$(this).parent().parent().remove();
		}
		
	});
})
</script>

这篇关于jQuery-ajax-天气接口的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery-ajax-天气接口

相关编程文章