1、前台脚本:
//用于切换图片列表的ajax function changePhoto(title,hotelId){ $.ajax({ contentType: "application/x-www-form-urlencoded; charset=UTF-8", type : "post", url : "<@a.webRoot/>/base/bms/hotel/hotelPicture-queryPictureByTitleAjax.action", data : { "hotelPicturePage.hotelPicture.title" : title, "hotelPicturePage.hotelPicture.hotelId" : hotelId }, dataType : "json", success : function(data) { //先将小图的内容替换 var hotelPictureList = data.hotelPcitureList; if(hotelPictureList !=‘undefined‘ && hotelPictureList!= null && hotelPictureList.length >0 ){ var htmlStr = ‘<tr>‘, imgTitle = "", imgUrl = ""; for(var i = 0;i < hotelPictureList.length;i++){ imgTitle = hotelPictureList[i].title; imgUrl = hotelPictureList[i].imgUrl; htmlStr += ‘<td originalPhoto="‘+imgUrl+‘"><img src="‘+imgUrl+‘" title="‘+imgTitle+‘" height="75" alt="‘+imgTitle+‘" width="100" name="imgUrl"></td>‘; } htmlStr += ‘</tr>‘; $("#hotelPictureContainer").html(htmlStr);//赋予table新的内容 $("#hotelPictureContainer").removeAttr("style");//清除之前小图滑动产生的样式 //然后使用第一张小图替换大图 if(hotelPictureList[0].imgUrl != null && hotelPictureList[0].imgUrl != ‘undefined‘){//判断下小图是否存在 $("#originalPhoto").attr("src",hotelPictureList[0].imgUrl); } //最后激活各个小图的点击替换大图 $("#thumbContainer td").click(function(){ alert(22); var tdObj = $(this); photoIndex = $("#thumbContainer td").index(tdObj); $("#originalPhoto").attr("src",tdObj.attr("originalPhoto")); $("#photoContainer").css("width",($("#originalPhoto").width())+"px"); }); //更新小图的区的数据 photoCount = $("#thumbContainer img").length;//图片数量 leftCount = Math.ceil(photoCount / 5);//分页数量 leftLevel = 0;//分页级数 photoIndex = 0;//图片序号 } else{ alert("抱歉,该酒店暂无相关图片。"); } }, error : function(){ alert("数据错误,请稍后再试。"); } }); };
2、后台java代码:
public void queryPictureByTitleAjax(){ //先过滤下页面传回的Title为""好"null"的问题 if(hotelPicturePage.getHotelPicture() != null ){ if("".equals(hotelPicturePage.getHotelPicture().getTitle()) || "null".equals(hotelPicturePage.getHotelPicture().getTitle())){ hotelPicturePage.getHotelPicture().setTitle(null); } } JSONObject jsobject = new JSONObject(); //获取需要的图片 hotelPicturePage = hotelPictureService.queryHotelPictureByTitle(commonPage, hotelPicturePage); if (hotelPicturePage.getHotelPictureList() == null||hotelPicturePage.getHotelPictureList().size()<=0) { jsobject.put("hotelPcitureList", null); } else {//封装json数据 List<HotelPicture> hotelPcitureList = hotelPicturePage.getHotelPictureList(); List<JSONObject> jsonList = new ArrayList<JSONObject>(); for(int i = 0;i < hotelPcitureList.size();i++){ JSONObject item = new JSONObject(); item.put("title", hotelPcitureList.get(i).getTitle()); item.put("imgUrl", hotelPcitureList.get(i).getImgUrl()); jsonList.add(item); } jsobject.put("hotelPcitureList", jsonList); } writeJson(jsobject); }
时间: 2024-11-08 20:03:25