jq ajax页面交互

最新推荐文章于 2024-08-07 10:09:10 发布

weixin_33739646

最新推荐文章于 2024-08-07 10:09:10 发布

阅读量71

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5309933.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.inp{ width: 100px; height: 100px;}
			.show{ width: 200px; height: 200px; border: 1px solid red;}
		</style>
		<script src="js/jquery-2.2.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				var oBtn = $(".inp");
				var oShow = $(".show");
				var url1 = "json.json";
				
				oBtn.click(function(){
					ajax(url1);
				})
				
				function ajax(url){
					$.ajax({
						type:"get",
						url:url,
						async:true,
						success:function(result){
//							console.log(result);
							var oDate =eval(result);
//							console.log(oDate);
							oShow.append(oDate.people[1].email);
							
						}
					});
				}
			})
		</script>
	</head>
	<body>
		<input class="inp" type="button" value="button" />
		<div class="show"></div>

	</body>
</html>

json.json

{
    "people":[
        {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
        {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
        {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
    ]
}

点击按钮获取 json.json中的数据无刷新整个页面让局部数据刷新，只需要改变json.json中的数据　

转载于:https://www.cnblogs.com/mingjixiaohui/p/5309933.html

weixin_33739646

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq ajax页面交互

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .inp{ width: 100px; height: 100px;} .show{ width: 200px; he...
复制链接

扫一扫