先看效果截图:
js-依赖jquery
$(function(){
$('#btn').on('click',function () {
var thishtml=""
$.ajax({
url: 'data_list.html',//这里直接放data_list.json也可以
dataType:'json',method: 'get',success: function (data) {
console.log(data)
//单个获值
//var na = (data[0].name)
//$(".panel").append(na);
//遍历出来 格式:jQuery.each(object,[callback])
$.each(data,function(i,item){
thishtml+="姓名:"+item["name"]+"
";
thishtml+="性别:"+item["sex"]+"
";
thishtml+="邮箱:"+item["email"]+"
"; //strHtml反复拿值做字符串拼接
alert(thishtml)
thishtml+="
"
})
//塞到页面的dom中
$(".panel").html(thishtml);
},error:function(){
alert("error!");
}
})
})
})
data_list.html-上面的ajax取的数据源, 其实就是一个空白的html,里面放的json
[
{
"name":"张国立","sex":"男","email":"zhangguoli@123.com"
},{
"name":"张铁林","email":"zhangtieli@123.com"
},{
"name":"邓婕","sex":"女","email":"zhenjie@123.com"
}
]
主页面html
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!