AJAX请求返回JSON数据动态生成html

1：DeliveryPersonVO对象

package com.funcanteen.business.entity.delivery.vo;

import java.util.List;
import com.funcanteen.business.entity.delivery.DeliveryPersonCampus;
import com.funcanteen.business.entity.delivery.DeliveryPersonStall;

public class DeliveryPersonVO {
    /**
     * 校区
     */
    private DeliveryPersonCampus deliveryPersonCampus;
    /**
     * 档口集合
     */
    private List<DeliveryPersonStall> deliveryPersonStallList;
    /**
     * 校区集合
     */
    private List<DeliveryPersonCampus> campusList;
    public DeliveryPersonCampus getDeliveryPersonCampus() {
        return deliveryPersonCampus;
    }
    public void setDeliveryPersonCampus(DeliveryPersonCampus deliveryPersonCampus) {
        this.deliveryPersonCampus = deliveryPersonCampus;
    }
    public List<DeliveryPersonStall> getDeliveryPersonStallList() {
        return deliveryPersonStallList;
    }
    public void setDeliveryPersonStallList(List<DeliveryPersonStall> deliveryPersonStallList) {
        this.deliveryPersonStallList = deliveryPersonStallList;
    }
    public List<DeliveryPersonCampus> getCampusList() {
        return campusList;
    }
    public void setCampusList(List<DeliveryPersonCampus> campusList) {
        this.campusList = campusList;
    }
    
}

2：DeliveryPersonCampus 对象

package com.funcanteen.business.entity.delivery;
/**
 * 
 * @author ckj
 *
 */
public class DeliveryPersonCampus {
    private Integer campusId;
    private String campusName;
    
    public Integer getCampusId() {
        return campusId;
    }
    public void setCampusId(Integer campusId) {
        this.campusId = campusId;
    }
    public String getCampusName() {
        return campusName;
    }
    public void setCampusName(String campusName) {
        this.campusName = campusName;
    }
    
}

3：DeliveryPersonStall 对象

package com.funcanteen.business.entity.delivery;
/**
 * 
 * @author ckj
 *
 */
public class DeliveryPersonStall {
    private Integer stallId;
    private String stallName;
    
    public Integer getStallId() {
        return stallId;
    }
    public void setStallId(Integer stallId) {
        this.stallId = stallId;
    }
    public String getStallName() {
        return stallName;
    }
    public void setStallName(String stallName) {
        this.stallName = stallName;
    }
}

4：DeliveryPersonCampus

package com.funcanteen.business.entity.delivery;
/**
 * 
 * @author ckj
 *
 */
public class DeliveryPersonCampus {
    private Integer campusId;
    private String campusName;
    
    public Integer getCampusId() {
        return campusId;
    }
    public void setCampusId(Integer campusId) {
        this.campusId = campusId;
    }
    public String getCampusName() {
        return campusName;
    }
    public void setCampusName(String campusName) {
        this.campusName = campusName;
    }
    
}

5jsp 页面

            <div id="addcampus" name="addcampus" class="control-group form-group" style="margin-bottom: 0">
            <label class="col-md-2 control-label" style="margin-right: 14px">是否再添加校区</label>
                <div class="form-group">
                  <select id="addCampusId" name="addCampusId" class="form-control" style="margin-bottom: 0;width:178px" onchange="queryCampusIdToStall()">
                    <option value="">所有</option>
                    <c:forEach items="${campusAllList }" var="campus">
                       <option value="${campus.id }">${campus.name }</option>
                    </c:forEach>
                  </select>
                </div>
            </div>
            
            <div id="campusAll" name="campusAll" class="control-group form-group">
                 <label class="col-md-2 control-label" style="margin-right: 14px">校区</label>
                <div class="parent_campus" style="width:60%; float:left;">
                <c:forEach items="${campusList }" var="campus">
                   <div style="width: 100%" class="choose_label">
                        <input type="checkbox" name="campusId" id="${campus.id }" value="${campus.id }" checked="checked"/> 
                        <label for="${campus.id }">${campus.name }</label>
                   </div>
                </c:forEach>
                </div>
            
            </div>

6：ajax 请求

//点击校区获取饭堂
function queryCampusIdToStall() {
          var campusId = [];
          $('input[name="campusId"]').each(function(i,o){
              campusId.push(o.value);
            });
       
            var addCampusId = $("#addCampusId").val();
            var deliveryPersonId = $("#deliveryPersonId").val();
            if (addCampusId != null && addCampusId != "") {
                $.ajax({
                     type: "GET",
                     url: "<%=basePath %>delivery/deliveryperson/update!queryCampusIdToStall",
                     data: {
                         "addCampusId" : addCampusId,
                         "campusId": campusId,
                     },
                     dataType: "json",
                     success: function(data){
                         if (data != null) {
                             var campus = data.deliveryPersonCampus;
                             var stallList=data.deliveryPersonStallList;
                             var campusList = data.campusList;
                             //请求下拉校区重新绑定新数据
                             $("#addCampusId").empty();
                            $('#addCampusId').append($("<option>").text("所有").val(""));
                            for(var item in campusList){
                                $("#addCampusId").append($("<option>").val(campusList[item].campusId).text(campusList[item].campusName));
                            }
                             //动态添加校区和档口
                             addCampus(campus.campusId,campus.campusName);
                             for(var item in stallList){
                                 addStall(stallList[item].stallId,stallList[item].stallName);
                             }
                         }
                      }
                 });
            }
        }

7：java后台代码

    /**
     * ajax 请求获取档口
     * 
     * @throws IOException
     */
    public void queryCampusIdToStall() throws IOException {
        HttpServletResponse response = ServletActionContext.getResponse();
        DeliveryPersonVO deliveryPersonVO = new DeliveryPersonVO();
        Campus campus = new Campus();
        DeliveryPersonCampus deliveryPersonCampus = new DeliveryPersonCampus();
        DeliveryPersonStall deliveryPersonStall = null;
        List<DeliveryPersonStall> personStallList = new ArrayList<DeliveryPersonStall>();
        List<DeliveryPersonCampus> personCampusList = new ArrayList<DeliveryPersonCampus>();// 动态重新封装下拉框校区数据

        //获取校区
        campus = campusService.load(addCampusId.longValue());
        deliveryPersonCampus.setCampusId(campus.getId().intValue());
        deliveryPersonCampus.setCampusName(campus.getName());
        // 根据用户选择的校区ID获取档口数据档口
        List<Stall> stallsList = stallService.getCampusIdToStallList(addCampusId.intValue());
        if (stallsList != null && stallsList.size() > 0) {
            for (Stall stall : stallsList) {
                deliveryPersonStall = new DeliveryPersonStall();
                deliveryPersonStall.setStallId(stall.getId().intValue());
                deliveryPersonStall.setStallName(stall.getName());
                personStallList.add(deliveryPersonStall);
            }
        }
        //获取重新要加载的下拉框校区数据
        List<Integer> campusIdsList = new ArrayList<Integer>();
        campusIdsList.add(addCampusId.intValue());
        if(campusId !=null && campusId.length>0){
            for(int i=0;i<campusId.length;i++){
                campusIdsList.add(campusId[i]); 
            }
        }
        List<Campus> notDeliverPersonList = campusService.getNotDeliverPersonList(campusIdsList);
        for(Campus cp : notDeliverPersonList){
            DeliveryPersonCampus dpc =new DeliveryPersonCampus();
            dpc.setCampusId(cp.getId().intValue());
            dpc.setCampusName(cp.getName());
            personCampusList.add(dpc);
        }
        //set VO
        deliveryPersonVO.setDeliveryPersonCampus(deliveryPersonCampus);//单个校区
        deliveryPersonVO.setDeliveryPersonStallList(personStallList);//某校区区所有档口
        deliveryPersonVO.setCampusList(personCampusList);//除以选中的所有的校区
        //转JSON
        String jsonString = JSON.toJSONString(deliveryPersonVO);
        response.setContentType("text/plain;charset=" + "utf-8");
        response.setCharacterEncoding("utf-8");
        response.getWriter().write(jsonString);

    }

8：json格式数据

{
"campusList": [
{
"campusId": 98,
"campusName": "揭阳市职业技术学院"
},
{
"campusId": 99,
"campusName": "汕头职业技术学院"
},
{
"campusId": 100,
"campusName": "广东工商职业学院肇庆校区"
},
{
"campusId": 101,
"campusName": "岭南职业技术学院（清远校区）"
},
{
"campusId": 102,
"campusName": "测试（江门区）"
},
{
"campusId": 103,
"campusName": "测试"
}
],
"deliveryPersonCampus": {
"campusId": 12,
"campusName": "广东轻工职业技术学院（南海校区）"
},
"deliveryPersonStallList": [
{
"stallId": 56,
"stallName": "原味汤菜饭（一饭二楼）"
},
{
"stallId": 82,
"stallName": "小亨美食（一饭六楼）"
}
]
}

 

转载于:https://www.cnblogs.com/SHMILYHP/p/7207033.html