json 遍历到 html,【原创】ajax获取json / $.each遍历 / $("").html 塞到dom中

先看效果截图：

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

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！