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

时间:2023-03-09 08:54:53
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": "小亨美食(一饭六楼)"
}
]
}