ajax 动态获取json的例子

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);
}