**城市表
**区域表
city表中的id和region表中的cityid外键关联
**街道表
street表中的regionid和region表中的id外键关联
**房屋信息表
表中的city,region,street与对应的表中id字段关联起来
=========================
到数据库基本搞定之后我们就开始上代码了
多条房屋信息,可以采用forEach去遍历,我们这里采用的是json返回结果动态生成div和table中的tr标签。
城市,区域,街道都是同理。利用ajax,json,返一个result在对应的div中遍历内容。
html:
<body>
<script type="text/javascript" src="js/jquery-3.2.1.js">script>
<script type="text/javascript">
//遍历城市信息
$(function(){
$.ajax({
url:"allCity.do",
type:"post",
dataType:"json",
success:function(result){
for(var i=0;ivar id=result[i].id;
var city=result[i].city;
s_opt="" οnclick='cityclick(this.id,this.value)' value="+city+" style='border: none;'>";
var opt=$(s_opt);
$("#city").append(opt);
}
}
});
});
script>
<script type="text/javascript">
//城市点击触发事件 显示该城市之下的区域信息
function cityclick(str,va){
$("#region").html("");
$("#street").html("");
var cityid=str;
var city=va;
$.ajax({
url:"allRegion.do",
type:"post",
data:{"cityid":cityid},
dataType:"json",
success:function(result){
for(var i=0;ivar id=result[i].id;
var region=result[i].region;
s_opt="" οnclick='regionclick(this.id,this.value)' value="+region+" style='border: none;'>";
var opt=$(s_opt);
$("#region").append(opt);
}
}
});
}
script>
<script type="text/javascript">
//区域点击触发事件 显示该城市之下的街道信息
function regionclick(str,va){
$("#street").html("");
var regionid=str;
var region=va;
$.ajax({
url:"allStreet.do",
type:"post",
data:{"regionid":regionid},
dataType:"json",
success:function(result){
for(var i=0;ivar id=result[i].id;
var street=result[i].street;
s_opt="" οnclick='streetclick(this.id)' value="+street+" style='border: none;'>";
var opt=$(s_opt);
$("#street").append(opt);
}
}
});
}
script>
<script type="text/javascript">
//街道点击触发事件 显示该街道之下的区域信息
function streetclick(va){
$("#man_zone").html("");
var street=va;
alert(street);
$.ajax({
url:"ByStreetHouseSellInfo.do",
type:"post",
data:{"street":street},
dataType:"json",
success:function(result){
for(var i=0;iif (result-""==0){
$("#man_zone").append("暂无住房信息");
}else{
var id=result[i].id;
var head=result[i].head;
var floor=result[i].floor;
var allfloor=result[i].allfloor;
var toward=result[i].toward;
var model=result[i].model;
var price=result[i].price;
s_opt=""+idοnclick='getHouseId(this.id)' style='width: 10%;text-align: center;'> " οnclick='getHouseId(this.id)' style='width: 90%;text-align: left;'>"
+head+"
楼层:"+floor+"/"+allfloor
+"朝向:"+toward+"
户型:"
+model+"价格:"+price+"元/平米
";
var opt=$(s_opt);
$("#man_zone").append(opt);
}
}
}
});
}
script>
<script type="text/javascript">
//房屋触发时间,显示房屋具体信息
function getHouseId(va){
var id=va;
alert(id);
$.ajax({
url:"ByIdHouseSellInfo.do",
type:"post",
data:{"id":id},
success:function(result){
window.location.href="inOnlySellInfo.do";
}
});
}
script>
<div>
<h3>城市:h3><div id="city" >div><br>
<h3>区域:h3><div id="region">div><br>
<h3>街道:h3><div id="street">div><br>
div>
<table id="man_zone" style="width: 100%;height: 100%" border="1px">
table>
div>
body>
后台就相对比较简单了,就是简单的从数据中查询数据
controller:
city、region、street查询
/**
* @author Administrator
*
*/
@Controller
public class HouseInformationController {
@Resource
private CityEmpDao cityDao;
@Resource
private RegionEmpDao regionDao;
@Resource
private StreetEmpDao streetDao;
/**
* 所有城市
*
* @return
*/
@RequestMapping("allCity.do")
@ResponseBody
public List allCity() {
List list = cityDao.findAllCity();
System.out.println("所有城市:" + list);
return list;
}
/**
* 区域
*
* @return
* @throws UnsupportedEncodingException
*/
@RequestMapping("allRegion.do")
@ResponseBody
public List allRegion(HttpServletRequest req)
throws UnsupportedEncodingException {
req.setCharacterEncoding("utf-8");
Integer cityid = Integer.parseInt(req.getParameter("cityid"));
System.out.println(cityid);
List list = regionDao.findAllRegion(cityid);
System.out.println("区域:" + list);
return list;
}
/**
* 街道
*
* @return
* @throws UnsupportedEncodingException
* //
*/
@RequestMapping("allStreet.do")
@ResponseBody
public List allStreet(HttpServletRequest req) throws
UnsupportedEncodingException{
req.setCharacterEncoding("utf-8");
Integer regionid=Integer.parseInt(req.getParameter("regionid"));
System.out.println(regionid);
List list=streetDao.findAllStreete(regionid);
System.out.println("街道"+list);
return list;
}
}
house相关查询
@Controller
public class HouseSellEmpController {
@Resource
private HouseSellEmpDao houseSellDao;
@Resource
private HouseSellEmp houseSellEmp;
/**
* 进入售房信息的页面
* @return
*/
@RequestMapping("inSellInfo.do")
public String inSellInfo(){
return "houseSell/sellInfo";
}
/**
* 进入单个售房信息的页面
* @return
*/
@RequestMapping("inOnlySellInfo.do")
public String inOnlySellInfo(){
return "houseSell/onlySellInfo";
}
/**
* 全部售房信息
* @return
*/
public String findAllHouseSellInfo(){
List list=houseSellDao.findHouseSellInfo();
return null;
}
/**
* 根据street查询
* @return
* @throws UnsupportedEncodingException
*/
@RequestMapping("ByStreetHouseSellInfo.do")
@ResponseBody
public List byStreetHouseSellInfo(HttpServletRequest req) throws UnsupportedEncodingException{
req.setCharacterEncoding("utf-8");
houseSellEmp.setStreet(req.getParameter("street"));
System.out.println(houseSellEmp.getStreet());
List list=houseSellDao.findByStreetHouseSellInfo(houseSellEmp);
System.out.println(list);
return list;
}
/**
* 根据city查询
* @param req
* @return
* @throws UnsupportedEncodingException
*/
@RequestMapping("ByCityHouseSellInfo.do")
@ResponseBody
public List byCityHouseSellInfo(HttpServletRequest req) throws UnsupportedEncodingException{
req.setCharacterEncoding("utf-8");
houseSellEmp.setCity(req.getParameter("city"));
System.out.println(houseSellEmp.getCity());
List list=houseSellDao.findByCityHouseSellInfo(houseSellEmp);
System.out.println(list);
return null;
}
/**
* 根据id查询
* @param req
* @return
*/
@RequestMapping("ByIdHouseSellInfo.do")
@ResponseBody
public String byIdHouseSellInfo(HttpServletRequest req,HttpServletResponse res,HttpSession session) throws UnsupportedEncodingException{
req.setCharacterEncoding("utf-8");
Integer id=Integer.parseInt(req.getParameter("id"));
System.out.println("shou"+id);
houseSellEmp=houseSellDao.findByIdHouseSellInfo(id);
session.setAttribute("onlySellInfo", houseSellEmp);
System.out.println(houseSellEmp);
return "正在加载...";
}
}
dao层
/**
* 全部城市
* @return
*/
public List findAllCity();
/**
* 根据regionid查询Street信息
* @param regionid
* @return
*/
public List findAllStreete(Integer regionid);
/**
* 根据cityid查询所有的region信息
*/
public List findAllRegion(Integer cityid);
@MyBatisBiz
public interface HouseSellEmpDao {
/**
* 查看全部的售房信息
* @return
*/
public List findHouseSellInfo();
/**
* 根据street查询售房信息
* @param houseSellEmp
* @return
*/
public List findByStreetHouseSellInfo(HouseSellEmp houseSellEmp);
/**
* 根据city查询售房信息
* @param houseSellEmp
* @return
*/
public List findByCityHouseSellInfo(HouseSellEmp houseSellEmp);
/**
* 根据id查询售房信息
* @param id
* @return
*/
public HouseSellEmp findByIdHouseSellInfo(Integer id);
}
sql 就不多阐述了,相对比较简单,
"com.ly.rs.dao.HouseSellEmpDao">
新人第一次写博客,希望大家多多包涵,这篇博客主要是用ajax来动态生成内容,取代forEach,顺便表达下ajax的功能之强大,
这个demo是作者,平时写玩的,可能有代码不规范之处,阐述不清楚的地方,希望大家多多指教,demo使用的是SSM框架。谢谢大家!!!