append操作

通过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()			  				
	});	 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值