【原创】ajax获取json / $.each遍历 / $("").html 塞到dom中
【原创】ajax获取json / $.each遍历 / $("").html 塞到dom中
柴高八斗之父 发表于3个月前
【原创】ajax获取json / $.each遍历 / $("").html 塞到dom中
  • 发表于 3个月前
  • 阅读 20
  • 收藏 1
  • 点赞 0
  • 评论 0
摘要: 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>

 

标签: AjaxTags
共有 人打赏支持
粉丝 4
博文 132
码字总数 50590
×
柴高八斗之父
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: