您的位置：首页 > 其它

jq ajax页面交互

2016-03-23 10:17 260 查看

<!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中的数据　

　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航