通过ajax获取数据然后遍历返回的json数据,最后通过jquery显示数据到jsp页面
通过案例介绍
//返回Json数据遍历
$.ajax({
url:'servlet/ScenicSpot?method=showScenicSpot',
type:'get',
dataType:'json',
async:false,
success:function(retdata){
$('#count').text(retdata.sumPage);
$('#nowcount').text(retdata.currentPage);
$(retdata.list).each(function(i,item){
add(i,item.id,item.scenic_spot_img,item.scenic_spot_name,item.scenic_spot_history)
})
}
})
//通过 append 增加内容格式
function add(j,id,scenic_spot_img,scenic_spot_name,scenic_spot_history){
if(j<3){
$('#tsOne').append(
"<div class='bi_one' >"+
"<a href='view_place.jsp?id="+id+"'>"+
"<img height='100%' src='"+scenic_spot_img+"'width='280px''</a>"+
"<div class='kong'>"+
"<h5 style='margin-top:10px;'>"+scenic_spot_name+"</h5><p>"+
scenic_spot_history.substring(0,50)+"...</p></div></div>"
)
}else{
$('#tsTwo').append(
"<div class='bi_one'>"+
"<a href='view_place.jsp?id="+id+"'>"+
"<img height='100%' src='"+scenic_spot_img+"'width='280px;''</a>"+
"<div class='kong'>"+
"<h5 style='margin-top:10px;'>"+scenic_spot_name+"</h5><p>"+
scenic_spot_history.substring(0,50)+"...</p></div></div>"
)
}
}
==================================================================================
//清空内容
$('.tsBass').empty()
//案例2
$.ajax({
url:'servlet/Login?op=SelMessage&judge=1',
type:'get',
dataType:'json',
success:function(retMeg){
$.each(retMeg,function(i,item){
//通过添加 prepend 数据 加载在加载中的数据最前面 $('#indisNews') 表示添加内容的容器
$('#indisNews').prepend(
"<li class='chat' title='双击查看详情'>"+
"<input type='hidden' class='mg_id' value='"+
item.mg_id+"'><span class='glyphicon glyphicon-envelope' aria-hidden='true'></span>"+
"<span class='glyphicon-class'></span>"+
item.mg_type+"<br/><br/><img class='delMeg' title='删除' src='images/deim.png'></li>"
)
})
}
})
//双击查看消息详情
$('#indisNews').on("dblclick",".chat",function(){
//获取
var mgId= $(this).find('input[class=mg_id]').val()
});
//单机查看消息详情
$('#indisNews').on("click",".chat",function(){
//获取
var mgId= $(this).find('input[class=mg_id]').val()
});