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

摘要: ajax从页面中获取json / 或直接获取json

先看效果截图：



js-依赖jquery

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(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"]+"<br>";
thishtml+="性别："+item["sex"]+"<br>";
thishtml+="邮箱："+item["email"]+"<br>";  //strHtml反复拿值做字符串拼接
alert(thishtml)
thishtml+="<hr>"
})
//塞到页面的dom中
$(".panel").html(thishtml);
},
error:function(){
alert("error!");
}
})
})
})
</script>

data_list.html-上面的ajax取的数据源 ， 其实就是一个空白的html，里面放的json

[
{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@123.com"
},
{
"name":"张铁林",
"sex":"男",
"email":"zhangtieli@123.com"
},
{
"name":"邓婕",
"sex":"女",
"email":"zhenjie@123.com"
}
]

主页面html

<input type="button" name="" id="btn" value="加载" />
<div class="panel">
</div>