利用ajax实现前端与后台的交互，从服务端获取数据，并调回到前端进行解析。下面是前端代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1" />
<title>案场助理个人中心-案场信息维护</title>
<link rel="stylesheet" type="text/css" href="static/css/messageProtect.css" />
<link rel="stylesheet" type="text/css" href="static/css/reset.css" />
<link rel="stylesheet" type="text/css" href="static/lib/laydate/need/laydate.css" />
<script type="text/javascript" src="static/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="static/lib/laydate/laydate.js"></script>
<script src="static/js/city2.js"></script>
<script type="text/javascript" src="static/js/citySelect2.js"></script>
<script type="text/javascript" src="static/js/messageProtect.js"></script>
<script type="text/javascript"> $(document).ready(function() { getAllHouseStyleData(); }); <!-- 当页面加载完成从服务器获取数据 --> function getAllHouseStyleData(){ $.ajax({ type:"post",async:false,url:"list_all_house_type",success:function(data){ data = eval("("+data+")"); fillHouseStyleInfo(data.root); showDeleWindow(); updateHouseType(); } }); } <!-- 遍历数据库返回json字符串，并展示在html页面上 --> function fillHouseStyleInfo(data){ var s = "<tr><th>户型图</th><th>户型名称</th><th>面积</th><th>房型</th><th>户型说明</th><th>操作</th></tr>"; $.each(data,function(v,o){ s+='<tr><td><img src="'+o.photoURL+'" alt="" /></td>'; s+='<td><p>'+o.caption+'</p></td>'; s+= '<td><p>'+o.area+' ㎡</p></td>'; s+='<td><p>'+o.housType+'</p></td>'; s+='<td><p>'+o.housTypeDesc+' </p></td>'; s+='<td><input type="button" class="btn-change" value="修改" data-upvalue="'+o.houseTypeId+'" />'; if(o.isUse!="yes"){ s+='<input type="button" class="btn-cancel" value="删除" data-value="'+o.houseTypeId+'"/></td></tr>'; } }); if(data.length>0){ $("#houseStyleInfo").html(s); }else{ $("#houseStyleInfo").html("<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>"); } } //删除选择弹框 function showDeleWindow(v){ $(".btn-cancel").click(function(){ var num = $(this).data("value"); $(".cancel-Box").show(); enterDelte(num); }); } //删除后台ajax调用程序 function enterDelte(n){ $(".yes-btn").click(function(){ $.ajax({ type:"post",//async:false,url:"delete_house_type_byId",data:{hId:n},success:function(data){ getAllHouseStyleData(); } }); //弹框关闭方法 agree(); }); } //修改户型信息 function updateHouseType(){ $(".btn-change").click(function(){ $.ajax({ type:"post",url:"get_current_house_type",data:{hId:$(this).data("upvalue")},success:function(data){ data = eval("("+data+")"); fillInForm(data.data); } }); }); } //显示修改信息 function fillInForm(data){ if(data.hasOwnProperty("houseTypeId")){ $("#newImg").attr('src',data.photoURL); $("#houseTypeId").val(data.houseTypeId); $("#imgUplode").val(data.photoURL); $("#caption").val(data.caption); $("#area").val(data.area); $("#housTypeDesc").val(data.housTypeDesc); var str = data.housType.split(" "); $(str).each(function(index){ if(this!=null && this!=""){ //alert(this.substring(1)); if(this.substring(1)=="房"){ $("#home").find("option[value="+this+"]").prop("selected",true); } if(this.substring(1)=="厅"){ $("#hall").find("option[value="+this+"]").prop("selected",true); } if(this.substring(1)=="卫"){ $("#toilet").find("option[value="+this+"]").prop("selected",true); } } }); } } </script>
</head>
<body>
<!-- <div class="header"> <a href="###" class="self-center">案场助理个人中心</a> <ul> <li><a href="###">首页</a></li> <li><a href="###">案场信息维护</a></li> <li><a href="###">价格优惠条款</a></li> <li><a href="###">房源管理</a></li> <li><a href="###">上下架管理</a></li> <li><a href="###">客户管理</a></li> <li><a href="###">成交业务</a></li> <li><a href="###">账号管理</a></li> </ul> <a href="###" class="welcome">欢迎您，某某某</a> </div> -->
<%@include file="publicHeader.jsp" %>
<div class="container">
<div class="home-messageProtect">
<p>首页 - 案场信息维护</p>
</div>
<%@include file="basicSide.jsp" %>
<!-- <div class="side-bar"> <ul> <li><a href="">基本信息</a></li> <li><a href="">效果图</a></li> <li><a href="" style="color:#199ed8">户型</a></li> <li><a href="">银行账号</a></li> <li><a href="">带看业务定义</a></li> <li><a href="">预售证管理</a></li> <li><a href="">认购规则</a></li> </ul> </div> -->
<div class="main-content">
<div class="house-type">
<div class="add-house">
<button class="addBtn" id="addHouse">新增户型</button>
</div>
<div class="house-list">
<table id="houseStyleInfo" style="table-layout:fixed;">
<!-- <tr> <th>户型图</th> <th>户型名称</th> <th>面积</th> <th>房型</th> <th>户型说明</th> <th>操作</th> </tr> <tr> <td> <img src="" alt="" /> </td> <td> <p>A3（两室一厅一卫）</p> </td> <td> <p>三房一厅两卫</p> </td> <td> <p>89m²</p> </td> <td> <p>说明说明说明说明 说明说明说明说明 说明说明说明说明 说明说明 </p> </td> <td> <input type="button" class="btn-change" value="修改" /> <input type="button" class="btn-cancel" value="删除" /> </td> </tr> -->
</table>
</div>
</div>
</div>
</div>
<div class="popCon">
<div class='close'></div>
<form class='form-Box' action='add_house_type' method="post" enctype="multipart/form-data">
<div class='form-div'>
<label class='form-label'>户型图</label>
<div class="up-pic">
<img src="" id="oldImg" >
<span>+</span>
<input type="file" id="oFile" onchange="oldFile()" name="pic" multiple="true" class="form-input file-pic"/>
</div>
</div>
<div class='form-div'>
<label class='form-label'>户型名称</label>
<input class='form-input' type='text' name='caption' />
</div>
<div class='form-div'>
<label class='form-label'>面积</label>
<input class='form-input' type='text' name='area' />
</div>
<div class='form-div'>
<label class='form-label'>房型</label>
<select name='home'>
<option value=''>房间数量</option>
<option value='一房'>一房</option>
<option value='两房'>两房</option>
<option value='三房'>三房</option>
<option value='四房'>四房</option>
<option value='五房'>五房</option>
<option value='六房'>六房</option>
</select>
<select name='hall'>
<option value=''>厅数量</option>
<option value='一厅'>一厅</option>
<option value='两厅'>两厅</option>
<option value='三厅'>三厅</option>
<option value='四厅'>四厅</option>
<option value='五厅'>五厅</option>
<option value='六厅'>六厅</option>
</select>
<select name='toilet'>
<option value=''>卫生间数量</option>
<option value='一卫'>一卫</option>
<option value='两卫'>两卫</option>
<option value='三卫'>三卫</option>
<option value='四卫'>四卫</option>
<option value='五卫'>五卫</option>
<option value='六卫'>六卫</option>
</select>
</div>
<div class='form-div'>
<label class='form-label'>户型说明</label>
<textarea name='housTypeDesc' cols='50' rows='5'></textarea>
</div>
<div class='btn' style='margin:50px 200px 10px 150px;'>
<input name="isSave" type='submit' class='btn1' value='保存' />
<input name="isSave" type='submit' class='btn2' value='保存并进入银行账号' />
</div>
</form>
</div>
<!-- 修改户型 -->
<div class="popChange">
<div class='close'></div>
<form class='form-Box' action='add_house_type' method="post" enctype="multipart/form-data">
<div class='form-div'>
<label class='form-label'>户型图</label>
<div class="up-pic">
<img src="" id="newImg" >
<span>+</span>
<input type="file" id="nFile" onchange="newFile()" name="pic" multiple="true" class="form-input file-pic"/>
<input type="hidden" id="houseTypeId" name="houseTypeId">
<input type="hidden" id="imgUplode" name="photoURL">
</div>
</div>
<div class='form-div'>
<label class='form-label'>户型名称</label>
<input class='form-input' type='text' name='caption' id="caption"/>
</div>
<div class='form-div'>
<label class='form-label'>面积</label>
<input class='form-input' type='text' name='area' id="area"/>
</div>
<div class='form-div'>
<label class='form-label'>房型</label>
<select name='home' id="home">
<option value=''>房间数量</option>
<option value='一房'>一房</option>
<option value='两房'>两房</option>
<option value='三房'>三房</option>
<option value='四房'>四房</option>
<option value='五房'>五房</option>
<option value='六房'>六房</option>
</select>
<select name='hall' id="hall">
<option value=''>厅数量</option>
<option value='一厅'>一厅</option>
<option value='两厅'>两厅</option>
<option value='三厅'>三厅</option>
<option value='四厅'>四厅</option>
<option value='五厅'>五厅</option>
<option value='六厅'>六厅</option>
</select>
<select name='toilet' id="toilet">
<option value=''>卫生间数量</option>
<option value='一卫'>一卫</option>
<option value='两卫'>两卫</option>
<option value='三卫'>三卫</option>
<option value='四卫'>四卫</option>
<option value='五卫'>五卫</option>
<option value='六卫'>六卫</option>
</select>
</div>
<div class='form-div'>
<label class='form-label'>户型说明</label>
<textarea name='housTypeDesc' cols='50' rows='5' id="housTypeDesc"></textarea>
</div>
<div class='btn' style='margin:50px 120px 10px 230px;'>
<input name="isSave" type='submit' class='btn1' value='保存' />
</div>
</form>
</div>
<div class="cancel-Box">
<div class="cancel-msg">
<p>你确定杨删除此条信息吗？</p>
</div>
<div class="cancel-sure">
<input type="button" value="是" class="yes-btn" />
<input type="button" value="否" class="no-btn" />
</div>
</div>
<div class="exchange-master"><span>@交易大师 2016</span></div>
</body>
<script type="text/javascript"> function changeFile() { var windowURL = window.URL || window.webkitURL; var loadImg = windowURL.createObjectURL(document.getElementById('file').files[0]); document.getElementById('img').setAttribute('src',loadImg); } </script>
</html>
下面上后端的代码：
Controller层
/** *获取当前项目下的所有户型 */
@ResponseBody
@RequestMapping("/list_all_house_type")
public void allHouseTypesList() {
// 获取session中的用户信息
User u = (User) this.request.getSession().getAttribute("userInfo");
// 获取持久化用户对象
User user = userService.findById(u.getUserId());
// 通过案场助理用户对象中对应的parentId记录的项目id关联银行账户的项目id，获取当前案场下的所有银行帐号
if (user.getParentId() != null && !user.getParentId().equals("")) {
List<HouseType> houseTypeList = houseTypeService.findAllHouseType(u.getParentId());
if (houseTypeList != null) {
this.outListString(houseTypeList);
}
}
}
Service层：
@Resource(name="baseDao")
private BaseDao baseDao;
@Override
public User findById(String id) {
return (User) baseDao.loadById(User.class,id);
}
DAO层：
/** 加载指定ID的持久化对象 */
public Object loadById(Class clazz,Serializable id) {
return getHibernateTemplate().get(clazz,id);
}
Controller：
@RequestMapping("/add_house_type")
public String addHouseType(HouseType ht,MultipartFile pic,String home,String hall,String toilet,String isSave) throws IOException{
//获取登录用户信息
User u = (User) this.request.getSession().getAttribute("userInfo");
//获取持久化用户对象
User user = userService.findById(u.getUserId());
//户型值组合
ht.setHousType(home+" "+hall+" "+toilet);
//执行添加户型业务逻辑
houseTypeService.addOrupdateHouseType(ht,user,pic);
//页面跳转
if(isSave.equals("保存")){
return "redirect:/to_houseType";
}else{
return "redirect:/to_bankCount";
}
}
@Override
public void addOrupdateHouseType(HouseType ht,User u,MultipartFile pic) throws IOException {
HouseType upHT = null;
// 判断该户型id是否存在，若不存在就新增户型，若存在就更新当前户型信息
if (ht.getHouseTypeId() == null || ht.getHouseTypeId() == "") {
ht.setHouseTypeId(SysContent.uuid());
}
if (!pic.isEmpty() && pic.getSize() > 0) {
String sepa = File.separator;
ServletContext session = SysContent.getSession().getServletContext();
System.out.println(session);
//sepa + "static" + sepa +
String realPath = SysContent.getSession().getServletContext().getRealPath("/static/upload");
System.out.println(realPath);
String rename = SysContent.getFileRename(pic.getOriginalFilename());
String rpn = realPath + sepa + rename;
String savePath = rpn.substring(rpn.indexOf("static"));
System.out.println(rpn);
File file = new File(rpn);
FileUtils.copyInputStreamToFile(pic.getInputStream(),file);
ht.setPhotoURL(savePath);
//上传文件备份
SysContent.backUploadPics(pic,rename);
}else{
if(upHT!=null){
ht.setPhotoURL(upHT.getPhotoURL());
}
}
ht.setProjectId(u.getParentId());
//户型默认未启用
ht.setIsUse("no");
baseDao.saveOrUpdate(ht);
}
以上
