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": "小亨美食(一饭六楼)"
}
]
}
AJAX请求返回JSON数据动态生成html的更多相关文章
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法
在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...
- ajax请求返回json数据弹出下载框的解决方法
将返回的Content-Type由application/json改为text/html. 在struts2下: <action name="XXXAjax" class=& ...
- AJAX请求,返回json进行页面绑值
AJAX请求,返回json进行页面绑值 后台 controller @RequestMapping(value = "backjson.do",method=RequestMeth ...
- ashx文件结合ajax使用(返回json数据)
ashx文件返回json数据: public void ProcessRequest(HttpContext context) { context.Response.ContentType = &qu ...
- Ajax前台返回JSON数据后再Controller中直接转换成类型使用,后台接收json转成实体的方法
之前写过一篇记录文章,写的是将一个比较复杂的数据结构在前台组合起来后传递到后台. 当时并不太了解@RequestBody,也并没有使用js提供的JSON.stringify()方法 所有都是自己写的, ...
- jquery序列化from表单使用ajax提交返回json数据(使用struts2注解result type = json)
1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @Paren ...
- js将json数据动态生成表格
今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...
- 使用jQuery发送POST,Ajax请求返回JSON格式数据
问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...
- ajax请求返回json字符串/json对象 处理
1. 返回json字符串如何处理 $.ajax({ url:xxx, success:function(date){ }, error:function(){ } }); 通过最原始的返回: Prin ...
随机推荐
- Dockerfile文档编写
图片显示问题,附上有道云笔记中链接:http://note.youdao.com/noteshare?id=fba6d2f53fd6447ba32c3b7accfeb89b&sub=B36B5 ...
- iframe内外的操作
因为iframe涉及到跨域问题,有时候有的比较多,这不今天遇到了一个问题,处在iframe里头的js要操作iframe元素,查找百度,是可以实现的: 用jQuery在IFRAME里取得父窗口的某个元素 ...
- 开学考试学生成绩管理Java
首先student类 package xuexi; public class Student { private String stunumber; private String name; priv ...
- 高次arccos积分
\[\Large\displaystyle \int_0^{1} \frac{\arccos^4 \left(x^2\right)}{\sqrt{1-x^2}}\,\mathrm{d}x\] \(\L ...
- JVM系列(二)之类加载
什么是类的加载 类加载是指将源代码编译后的.class加载到内存中初始化待程序使用的过程,类加载的最终结果就是将.class字节码加载到JVM中生成一个java.lang.Class对象,提供给程序使 ...
- vs2013编译soui并创建一个项目
1.soui.10.sln改为soui.13.sln 2.用nodepad++打开soui.13.sln,作如下修改 注:第一行我是改为13.00,编译后似乎自己变为12.00了 编译结果: 注:这是 ...
- FFmpeg + php 视屏转换
什么是FFmpeg? FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进 ...
- EntityFramework中使用sql语句
https://blog.csdn.net/yangyangafan/article/details/77602133 EntityFramework操作数据库谜一般的方便还不用写数据库,但前提是很简 ...
- 【JavaWeb】Spring相关错误记录
Exception in thread "main" org.springframework.beans.factory.BeanDefinitionStoreException: ...
- Plastic Sprayers Manufacturer - Ingenious Design Of Spray Plastic Bottle
Plastic bottles are now an indispensable container in life. Plastic bottles will appear in all aspec ...