一个标签改ajax异步加载的例子

2019独角兽企业重金招聘Python工程师标准>>>

<c:forEach>标签代码：

<ul>
        
	<c:forEach items="${disList}" var="dis" varStatus="status">
		<c:if test="${status.index >= 3}">
	    <div style="display: none;" id="hotcar_jxs_more" class="hotcar">
	</c:if>
	    <li onclick="changeImage(this)">
		    
		<c:if test="${dis.checked=='true'}">
			<img name="myimage" src="images/hotcar_xz03.png" value="${dis.id}">
		</c:if>
		<c:if test="${dis.checked=='false'}">
			<img name="myimage" src="images/hotcar_xz04.png" value="${dis.id}"> 
		</c:if>
		
		<div class="hotcar_jxs_wz">
		    <p class="title">
		    <c:if test="${dis.type=='4S'}">
			<span class="models_sj_left_ls">4S</span>
		    </c:if>
		       ${dis.name}
		    </p>
		    <p>${dis.address}</p>
		</div>
		
	    </li>
	    <c:if test="${status.index >= 3}">
	    </div>
	</c:if>
    </c:forEach>
    
</ul>

jQuery异步加载的代码：

<ul id="jxs_ul">
        	
</ul>

// 根据车型id和城市获取经销商
	function showGrouponPrice_location(carId,cityName){
		$.ajax({
		  	url:"getGrouponPrice",
			type:'post',
			data:"carId="+carId+"&cityName="+cityName,
			success:function(data){
				$("#jxs_ul li").remove();
				//alert("---   "+data);
				var json = eval("(" + data + ")");
				//alert(json[0].id+" - "+json[0].name);
				for(var i=0;i<json.length;i++){
					var li="";
					var img = "";
					var s4 = "";
			        var hotcar_jxs_wz = "";
		            
		            if(json[i].checked=="true"){
		            	img = "<img name='myimage' src='images/hotcar_xz03.png' value='"+json[i].id+"'>";
		            }else{
		            	img = "<img name='myimage' src='images/hotcar_xz04.png' value='"+json[i].id+"'>";
		            }
		            
		            if(json[i].type=="4S"){
		            	s4="<span class='models_sj_left_ls'>4S</span>";
		            }
		            hotcar_jxs_wz = "<div class='hotcar_jxs_wz'><p class='title'>"+s4 + json[i].name+"</p><p>"+json[i].address+"</p></div>";
		            
		            li="<li onclick='changeImage(this)'>"+img + hotcar_jxs_wz+"</li>";
		            
		            if(i>=3){
		            	li = "<div style='display: none;' id='hotcar_jxs_more' class='hotcar'>"+li+"</div>";
		            }
		            
		            $("#jxs_ul").append(li);
				}
				
				if($(".hotcar").is(":hidden")){
					//当前是hide状态
					if($("#mark").html()=="收起"){
	                   $('#mark').html("加载更多经销商");
	                   $('#show>img').attr("src","images/hotcar_arrow05.png");
	                }
				}else{
					//当前是show状态
				 	
				}
				
			}
		});	
	}

使用<c:forEach>标签的时候，java后台直接返回list数组：

request.setAttribute("disList", disList);

使用ajax异步获取的时候，将list数组转换为json数组

JSONArray jsonarray = JSONArray.fromObject(disList);
			
System.out.println(disList);
PrintWriter out;
response.setCharacterEncoding("utf-8");
out = response.getWriter();
out.write(jsonarray.toString());
out.flush();
out.close();

转载于:https://my.oschina.net/hehongbo/blog/719435