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

时间: 2024-11-08 20:03:25

ajax 动态获取json的例子的相关文章

ECharts 环形饼图 动态获取json数据

ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100%; height:400px;"></div> 二.js部分 <script type="text/javascript"> function loadOneColumn() {     var myChart = echarts.init(doc

jquery通过ajax方法获取json数据不执行success回调

问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号!

jquery通过ajax方法获取json数据不执行success

1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success

一个简单的ajax获取json的例子

一.第一个 html: <div id="ruleList"></div>向div里添加一段循环输出的数据 js: $.ajax({ type: "POST", url: "ruleListAction.do?method=searchRuleList", //我们用text格式接收  //dataType: "text", //json格式接收数据 dataType: "json"

ajax模拟获取json

现在工作中我用到获取数据的方式,基本都是ajax.前台获取后端的数据后,需要进行处理,然后把他们放进页面中的相应标签里.下面举一个简单的例子,来模拟数据的获取和摆放. 这里用ng框架获取数据然后处理,和用原生js的方式将数据放进页面中.项目结构: (这里请求数据的时候J就是一个跨域的问题,我们需要将这段代码,房子服务器里去跑,我这里用的是 xampp 搭建的服务,内含Apache和MySQL,etc) 项目结构如上所示,请求的是同一个php数据,PHP里面是有一个json. { "sites&q

ajax 动态获取数据库中的值

功能简介:  在一个输入框中输入内容 ,当内容长度>1时向后发送ajax   从数据库中获取有关文本框中的内容在前台显示, 前台设计一些点击事件,以及jquery的应用 1   使用了springmvc  中的requestmapping注解  故 先附上 配置文件 web.xml配置: <servlet> <servlet-name>springDispatcherServlet</servlet-name> <servlet-class>org.s

C# 动态获取JSON实体对象

1 //获取ip物理地址的接口地址 2 public static readonly string ipUrl = "http://ip.taobao.com/service/getIpInfo.php?ip="; 3 4 public void ProcessRequest(HttpContext context) 5 { 6 context.Response.ContentType = "text"; 7 string ip = DTRequest.GetQue

使用AngularJS结合Highchart图表动态获取JSON格式数据

Highchart折线图代码 $(function () { var chartLine = new Highcharts.Chart({ chart: { type: 'line', <em><span style="color:#ff0000;">renderTo: 'container2'</span></em> }, title: { text: '上月已还款金额与本月账单金额对比结果' }, subtitle: { text:

Ajax动态加载数据

前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) /// <summary> /// 电话查询页面 /// </summary> /// <returns></returns> public ActionResult PhoneSearch(string sql) { phoneList=从数据库查询数据: V