SSM项目-我爱我家（二）
2024-05-29 12:30:56
首页
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link type="text/css" rel="stylesheet" href="css/index.css" /><script src="js/jquery-1.8.3.js"></script><!--<script src="js/index.js"></script>--></head>
<body><!--第一部分：头部-->
<!--1.背景图所在div-->
<div id="d2"><!--1.1 主题内容居中内容层 --><div class="d2c2"><!--1.1.1 导航--><div class="d2c22"><!--内联框体,引入顶部界面--><iframe src="common/index_top.html" height="60px" width="1180px" scrolling="no" frameborder="0"></iframe></div><!--1.1.2 搜索框和图片所在大的div--><div class="d2c23"><!--1.1.2.1 空的div只为空出距离--><div class="d2c232"></div><!--1.1.2.2 搜索框和图片所在内容div--><div class="d2c233"><div><img src="image/shouye/ind-banner-wz.png"/></div><div><ul><li>二<span>手</span>房</li><li>租房</li><li>小区</li></ul></div><div><p><input type="text" name="search" id="font"/></p><p><a href="#" onclick="startSearch($('#font').val())" >开始找房</a></p></div></div></div></div>
</div>
<!--2.第二部分:横向三张图片所在div-->
<div id="d3"><!--2.1横向三张图片所在主题内容居中div--><div><img src="image/shouye/two/zhuce.jpg"/><img src="image/shouye/two/goufang.jpg"/><img src="image/shouye/two/xinfang.jpg"/></div>
</div>
<!--3.第三部分:-->
<div id="d4"><!--3.1主题内容居中div--><div><!--<a href="#"><ul><li><img src="data:image/shouye/mulu/xuanfangka.png" height="90px" width="90px"/></li><li>选房卡</li><li>需求太多？我们帮您来管理</li></ul></a><a href="#"><ul><li><img src="data:image/shouye/mulu/dituzhaofang.png" height="90px" width="90px"/></li><li>地图找房</li><li>更快捷的找房姿势</li></ul></a><a href="#"><ul><li><img src="data:image/shouye/mulu/jingjiren.png" height="90px" width="90px"/></li><li>经纪人</li><li>自己找房太累？不妨找个靠谱经纪人</li></ul></a><a href="#"><ul><li><img src="data:image/shouye/mulu/yezhuweituo.png"/></li><li>业主委托</li><li>放心委托，专业服务</li></ul></a>--></div>
</div>
<!--4.第四部分下载APP-->
<div id="d5"><!--4.1 主题内容居中div--><div><p><img src="image/shouye/app/ind-mid-wz.png"/></p><div><ul><li><img src="image/shouye/app/iphone.png"></li><li><img src="image/shouye/app/android.png"></li></ul><p><img src="image/shouye/app/code-app.png"></p></div></div>
</div>
<!--5.第五部分：有好房-整体-->
<div id="d6"><!--5.1主题内容的div--><div class="d6c2"><!--有好房前面的黄色小方块--><i></i><!--有好房的样式设置--><h2>有好房</h2></div><!--好房那么多所在行的内容--><p>好房辣么多，总有一套适合你</p><!--好房那么多所在行的内容后面的“更多”选项的超链接样式--><a href="">更多<!--“更多”超链接选项后面的小箭头--><span></span></a>
</div>
<!--6.第六部分：横向四张图片所在div-->
<!--有好房信息-->
<div id="d7"><ul><li><a href="#"><img src="image/shouye/six/gaishanshouxuan.jpg"/></a></li><li><a href="#">改善首选</a></li><li><a href="#"><i></i>让家更大更温暖</a></li></ul></div><!--7.第七部分：房产知识，锦郎妙计所在大div-->
<div id="d8"><!--7.1主题内容居中div--><div class="d8c2"><!--7.1.1房产知识，锦囊妙计所在行的内容--><ul><li>房产知识</li><li>锦囊妙计</li></ul><!--更多--><a href="#">更多<i></i></a><!--7.1.2横向两张图所在div--><div class="d8c22"><div><a href="#"><img src="image/shouye/seven/fangchanzhishi.jpg"/></a></div><div><h3><a href="#">定金和押金有什么区别?</a></h3><p>很多朋友在租房过程中，常常会遇被一些专业术语搞糊涂，比如租房定金和租房押金是一回事吗？有什么样的区别...</p></div><div><a href=""><img src="image/shouye/seven/jinnangmiaoji.jpg"/></a></div><div><h3><a href="#">锦囊妙计</a></h3><p>租房时除了考量房屋本身的条件之外，对于小区的选择也是非常重要的。如果住进条件不好的小区，可能生活配套...</p></div></div></div>
</div>
<!--第八部分：-->
<div id="d9"><!--5.1主题内容的div--><div class="d6c2"><!--有好房前面的黄色小方块--><i></i><!--有好房的样式设置--><h2>新房频道</h2></div><!--好房那么多所在行的内容--><p>以我之爱，筑您之家</p><!--好房那么多所在行的内容后面的“更多”选项的超链接样式--><a href="">更多<!--“更多”超链接选项后面的小箭头--><span></span></a>
</div>
<!--第九部分:主题内容居中div-->
<div id="d10"><div class="d10c2"><!--第一张图片所在div--><a href="#"><div><h3>苏宁紫金嘉悦</h3><p>20000元/平</p></div></a><!--第二张图片所在div--><a href="#"><div><h3>中南乐尚街</h3><p>14500元/平</p></div></a><!--第三张图片所在div--><a href="#"><div><h3>紫荆名苑</h3><p>25709元/平</p></div></a></div><p><a href="#">玄武 仙鹤门商圈 35-55平米 公寓</a></p><p><a href="#">栖霞 马群 37-48平米 公寓</a></p><p><a href="#">栖霞 和燕路 89-119平米 普通住宅</a></p>
</div>
<!--第十部分:背景-->
<div id="d11"><ul><li>友情链接<span></span></li><li>热门二手房<span></span></li><li>热门租房<span></span></li><li>热门小区<span></span></li><li>热门新房<span></span></li><li>热门房价<span></span></li><li>热门房产网<span></span></li><li>房产百科<span></span></li></ul><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><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><li><a href="#">南京房地产</a></li><li><a href="#">南京楼盘</a></li><li><a href="#">南京二手房</a></li><li><a href="#">南京天气预报15天</a></li><li><a href="#">南京二手房</a></li><li><a href="#">成都房产</a></li><li><a href="#">长沙房产网</a></li><li><a href="#">集成灶</a></li></ul>
</div>
<iframe src="common/root/publicRoot.html" width="100%" height="314px" frameborder="0px" scrolling="no"></iframe>
<aside><ul><li><a href="#"><i></i></a></li><li><a href="#"><i></i></a></li><li><a href="#"><i></i></a></li><li><a href="#"><i></i></a></li><li><a href="#"><i></i></a></li><li><a href="#"><i></i></a></li><li><a href="#"><i></i></a></li></ul>
</aside>
<article><span>咨询经纪人</span><i></i>
</article><!--d7的jQuery-->
<script type="text/javascript">//加载时操作$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getHavegoodhouse",function (data) {alert("进入d7的jQuery回调,集合是"+data);var str =""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i,item) {str+='<ul><li><a href="#"><img src="'+item.yhfinmgurl+'"/></a></li>'+'<li><a href="#">'+item.yhftitle+'</a></li>'+'<li><a href="#"><i></i>'+item.yhfsummary+'</a></li></ul>';});//将str放入到d7的div中$("#d7").html(str);})});<!--d4的jQuery-->//加载时操作$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getPicinfo",function (data) {var str =""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i,item) {str+='<a href="#"><ul><li><img src="'+item.twimgurl+'" height="90px" width="90px" /></li>'+'<li>'+item.twtitle+'</li>'+'<li>'+item.twsummary+'</li></ul></a>';});//将str放入到d4的div中$("#d4 > div ").html(str);})});</script></body>
</html>
——————————————————————————————————————————
二手房页面，按条件查询
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>二手房首页</title><link type="text/css" rel="stylesheet" href="css/secondHandHouse.css"/><script src="js/jquery-1.8.3.js"></script></head>
<bodystyle="overflow-x: hidden;">
<!--1.黑色背景头部导航-->
<div id="d2"><iframe src="common/public_top.html" height="60px"width="100%" scrolling="no" frameborder="no"></iframe>
</div>
<!--2.搜索框所在灰色背景两端顶头div-->
<div id="d3"><!--2.1 主体内容居中div--><div class="d3c2"><p><span><a href="#">我爱我家南京</a> </span>><span><a href="#">南京二手房</a></span></p><p><input type="text" name="search" placeholder="区域、商圈、小区、地铁应有尽有"/><input type="image" src="image/secondHouse/search.png"/></p></div>
</div>
<!--3.条件筛选-->
<div id="d4"><!--3.1主体内容居中div--><div class="d4c2"><!--3.1.1 选项卡--><div class="d4c22"><p><a href="#">条件筛选</a></p><p><a href="#">选房卡</a></p></div><!--3.1.2 条件筛选--><div class="d4c23"><!--3.1.2.1 位置--><div class="d4c232"><p>位置</p><ul><li>区域</li><li>地铁</li></ul></div><!--3.1.2.2 所有条件筛选所在div--><div class="d4c233"><!--区域--><dl id="district"><dt>全部</dt><!-- <dd>江宁区</dd><dd>鼓楼区</dd><dd>玄武区</dd><dd>建邺区</dd><dd>秦淮区</dd><dd>栖霞区</dd><dd>雨花台区</dd><dd>浦口区</dd><dd>六合区</dd><dd>溧水区</dd><dd>高淳区</dd><dd>南京周边</dd>--></dl><!--3.1.2.2.1总价--><dl id="totalpricesection"><dt>总价</dt><!-- <dd><img src="data:image/secondHouse/kuang2.png"/><span class="maxprice">80万以下</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="price">80-100万</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="price">100-120万</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="price">120-150万</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="price">150-200万</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="price">200-300万</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="price">300-500万</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="minprice">500万以上</span></dd>--><dd><ul><li><input type="text" name="minarea"/></li><li>~</li><li><input type="text" name="maxarea"/></li><li>㎡</li><li><input type="button" value="确定"/></li></ul></dd></dl><!--3.1.2.2.2面积--><dl id="totalareasection"><dt>面积</dt><!-- <dd><img src="data:image/secondHouse/kuang2.png"/><span class="maxarea">50㎡以下</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="area">50-70㎡</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="area">70-90㎡</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="area">90-110㎡</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="area">110-130㎡</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="area">130-150㎡</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="area">150-200㎡</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="minarea">200㎡以上</span></dd>--><dd><ul><li><input type="text" name="minarea"/></li><li>~</li><li><input type="text" name="maxarea"/></li><li>㎡</li><li><input type="button" value="确定"/></li></ul></dd></dl><!--3.1.2.2.3户型--><dl id="housetype"><dt>户型</dt><!-- <dd><img src="data:image/secondHouse/kuang2.png"/><span class="housetype">一室</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="housetype">二室</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="housetype">三室</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="housetype">四室</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="housetype">五室</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="housetype">五室以上</span></dd>--></dl><!--3.1.2.2.4用途--><dl id="houseuse"><dt>用途</dt><!-- <dd><img src="data:image/secondHouse/kuang2.png"/><span class="use">普通住宅</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="use">别墅</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="use">其他</span></dd>--></dl><!--3.1.2.2.5楼层--><dl id="louceng"><dt>楼层</dt><!-- <dd><img src="data:image/secondHouse/kuang2.png"/><span class="floor">低楼层</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="floor">中楼层</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="floor">高楼层</span></dd>--></dl><!--3.1.2.2.6朝向--><dl id="chaoxiang"><dt>朝向</dt><!-- <dd><img src="data:image/secondHouse/kuang2.png"/><span class="faceto">南北</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="faceto">南</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="faceto">东</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="faceto">西</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="faceto">北</span></dd>--></dl><!--3.1.2.2.7楼龄--><dl id="louling"><dt>楼龄</dt><!-- <dd><img src="data:image/secondHouse/kuang2.png"/><span class="houseage">5年以内</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="houseage">10年以内</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="houseage">15年以内</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="houseage">20年以内</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="houseage">20年以上</span></dd>--></dl><!--3.1.2.2.8装修--><dl id="zhuangxiu"><dt>装修</dt><!-- <dd><img src="data:image/secondHouse/kuang2.png"/><span class="decoration">精装修</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="decoration">普通装修</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="decoration">毛坯房</span></dd>--></dl><!--3.1.2.2.9标签--><dl id="biaoqian"><dt>标签</dt><!-- <dd><img src="data:image/secondHouse/kuang2.png"/><span class="lable">近地铁</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="lable">随时看</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="lable">满两年</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="lable">满五年</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="lable">近公园</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="lable">复式</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="lable">跃层</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="lable">loft</span></dd><dd><img src="data:image/secondHouse/kuang1.png"/><span class="lable">隧道口</span></dd>--></dl></div><!--3.1.2.3 更多首期链接div--><div class="d4c234"><img src="image/secondHouse/shouqi.png"/></div></div><!--3.1.3条件拼接--><div class="d4c24"><!--3.1.3.1 条件文字所在div--><div class="d4c242">条件</div><!--3.1.3.2 条件拼接div--><div class="d4c243" id="condition"><!-- <p><span>毛坯房</span><label>X</label></p><p><span>普通住宅</span><label>X</label></p><p><span>普通住宅</span><label>X</label></p>--></div><!--3.1.3.3 保存删除所在div--><div class="d4c244"><img id="save" src="image/secondHouse/save.png"/><img id="delete" src="image/secondHouse/delete.png"/></div></div></div>
</div>
<!--4.数据部分div两端顶头div-->
<div id="d5"><!--4.1主题内容居中div--><div class="d5c2"><!--4.1.1左侧数据列表部分div--><div class="d5c22"><!--4.1.1.1第一行菜单列表div--><div class="d5c222"><ul><li>默认排序</li><li>总价</li><li>单价</li><li>面积</li><li>最新发布</li></ul></div><!--4.1.1.2第二行总条数div--><div class="d5c223" id="totalCount"><!--共找到 <strong>39510</strong> 套房源--></div><!--★4.1.1.3数据列表div--><div class="d5c224" id="houseList"><!--4.1.1.3.1 数据内容div--><!-- <div class="d5c2242">--><!--<!–4.1.3.1.1 存放图片div–><div><a href="#"><img src="data:image/secondHouse/house/1.jpg" height="195px" width="240px"></a></div><!–4.1.3.1.2 存放文字内容div–><div><!–黑体字标题–><h3><a href="#">西方巷一室一厅一卫</a></h3><!–房子信息–><div><ul><li><i></i>1 室 1 厅 · 36 平米 · 南 · 高楼层/7层 · 精装</li><li><i></i>新街口 西方巷 · 距离地铁张府园310米</li><li><i></i>1 人关注 · 近30天带看 13 次 · 2018-01-05发布</li></ul><ul><li><strong>165</strong>万</li><li>单价45833元/m²</li></ul></div><!–房子标签–><div><span>近地铁</span><span>满两年</span><span>近公园</span></div></div></div></div><!–★4.1.1.3数据列表div–><div class="d5c224"><!–4.1.1.3.1 数据内容div–><div class="d5c2242"><!–4.1.3.1.1 存放图片div–><div><a href="#"><img src="data:image/secondHouse/house/2.jpg" height="195px" width="240px"></a></div><!–4.1.3.1.2 存放文字内容div–><div><!–黑体字标题–><h3><a href="#">新街口 省中医 市妇幼 朝天宫西街 三房 全明 边户带阳光房</a></h3><!–房子信息–><div><ul><li><i></i>1 室 1 厅 · 36 平米 · 南 · 高楼层/7层 · 精装</li><li><i></i>新街口 西方巷 · 距离地铁张府园310米</li><li><i></i>1 人关注 · 近30天带看 13 次 · 2018-01-05发布</li></ul><ul><li><strong>270</strong>万</li><li>单价45833元/m²</li></ul></div><!–房子标签–><div><span>近地铁</span><span>满两年</span><span>近公园</span></div></div></div></div><!–★4.1.1.3数据列表div–><div class="d5c224"><!–4.1.1.3.1 数据内容div–><div class="d5c2242"><!–4.1.3.1.1 存放图片div–><div><a href="#"><img src="data:image/secondHouse/house/3.jpg" height="195px" width="240px"></a></div><!–4.1.3.1.2 存放文字内容div–><div><!–黑体字标题–><h3><a href="#">典雅居三室二厅一卫</a></h3><!–房子信息–><div><ul><li><i></i>1 室 1 厅 · 36 平米 · 南 · 高楼层/7层 · 精装</li><li><i></i>新街口 西方巷 · 距离地铁张府园310米</li><li><i></i>1 人关注 · 近30天带看 13 次 · 2018-01-05发布</li></ul><ul><li><strong>338</strong>万</li><li>单价45833元/m²</li></ul></div><!–房子标签–><div><span>近地铁</span><span>满两年</span><span>近公园</span></div></div>--><!-- </div>--></div><!--4.1.1.4数据分页所在div--><div class="d5c225"><!-- <ul><li>第<span id="pageno">1</span>/<span id="totalpage">30</span></li><li><a href="#">首页</a></li><li><a href="#">上一页</a></li><li><a href="#">下一页</a></li><li><a href="#">末页</a></li><li>共<span id="totalcount">100</span>条</li></ul>--></div></div><!--4.1.2 右侧地图部分div--><div class="d5c23"><a href="#"><img src="image/secondHouse/map.png"/><span></span></a></div></div>
</div>
<div><iframe src="common/root/publicRoot.html" width="100%" height="314px" scrolling="no" frameborder="no"></iframe>
</div><!--条件选项的jQuery-->
<script type="text/javascript">//获得区级$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getDistrict", function (data) {//alert("进入区级的jQuery回调,集合是" + data);var str = `<dt>全部</dt>`; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象,ecmascript6报错打开,支持``撇号//pojo的字段名$(data).each(function (i, item) {//绑定点击事件οnclick="conditionSel();"str += `<dd><input type="radio" name="district" οnclick="conditionSel();" value="${item.dname}" />${item.dname}</dd>`;});//将str放入到d4的div中$("#district").html(str);});//});//获得价格//$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getTotalpricesection", function (data) {var str = ""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i, item) {str += `<dd><input type="radio" name="totalpricesection" οnclick="conditionSel();" value="${item.tpsname}" />${item.tpsname}</dd>`;});//将str放入到d4的div中$("#totalpricesection>dt").after(str);});//});//获得面积//$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getTotalareasection", function (data) {var str = ""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i, item) {str += `<dd><input type="radio" name="totalareasection" οnclick="conditionSel();" value="${item.tasname}" />${item.tasname}</dd>`;});//将str放入到d4的div中$("#totalareasection>dt").after(str);});//});//获得户型//$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getHousetype", function (data) {var str = ""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i, item) {str += `<dd><input type="radio" name="housetype" οnclick="conditionSel();" value="${item.htname}" />${item.htname}</dd>`;});//将str放入到d4的div中$("#housetype>dt").after(str);});//});//获得用途//$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getHouseuse", function (data) {var str = ""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i, item) {str += `<dd><input type="radio" name="houseuse" οnclick="conditionSel();" value="${item.huname}" />${item.huname}</dd>`;});//将str放入到d4的div中$("#houseuse>dt").after(str);});//});//获得楼层//$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getLouceng", function (data) {var str = ""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i, item) {str += `<dd><input type="radio" name="louceng" οnclick="conditionSel();" value="${item.lcname}" />${item.lcname}</dd>`;});//将str放入到d4的div中$("#louceng>dt").after(str);});//});//获得朝向//$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getChaoxiang", function (data) {var str = ""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i, item) {str += `<dd><input type="radio" name="chaoxiang" οnclick="conditionSel();" value="${item.cxname}" />${item.cxname}</dd>`;});//将str放入到d4的div中$("#chaoxiang>dt").after(str);});//});//获得楼龄//$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getLouling", function (data) {var str = ""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i, item) {str += `<dd><input type="radio" name="louling" οnclick="conditionSel();" value="${item.llname}" />${item.llname}</dd>`;});//将str放入到d4的div中$("#louling>dt").after(str);});//});//获得装修// $(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getZhuangxiu", function (data) {var str = ""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i, item) {str += `<dd><input type="radio" name="zhuangxiu" οnclick="conditionSel();" value="${item.zxname}" />${item.zxname}</dd>`;});//将str放入到d4的div中$("#zhuangxiu>dt").after(str);});//});//获得标签//$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getBiaoqian", function (data) {var str = ""; //存放ul的html代码//拼接str,遍历data集合,i是索引,item是集合中的对象//pojo的字段名$(data).each(function (i, item) {str += `<dd><input type="radio" name="biaoqian" οnclick="conditionSel();" value="${item.bqname}" />${item.bqname}</dd>`;});//将str放入到d4的div中$("#biaoqian>dt").after(str);});//});//获取房源信息//$(document).ready(function () {//拿控制类的回调方法,data是返回的值,集合$.get("/getHouseinfo", function (data) {alert("data" + data);alert("data.houseinfo" + data.houseinfo);alert("data.pageInfo" + data.pageInfo);//console.log(data)//调用房屋相关信息showHouseInfo(data.houseinfo);//调用分页信息showPageInfo(data.pageInfo);});});//显示房源信息方法function showHouseInfo(data) {//alert("data" + data);//data是Controller控制类的houseinfos对象var str = "";//遍历data集合$(data).each(function (i, item) {str += `<div class="d5c2242"><div><a href="#"><img src="${item.hpurl}" height="195px" width="240px"></a></div><div><h3><a href="#">${item.information}</a></h3><div><ul><li><i></i>${item.htname}.${item.area}平米 .${item.cxname}.${item.lcname}.${item.zxname}</li><li><i></i>${item.sname}</li><li><i></i>${item.personno}人关注 . 近30天带看${item.dkno}次 .${item.publishtime}发布</li></ul><ul><li><strong>${item.price}</strong>万</li><li>单价${(item.price / item.area).toFixed(2)}元/m²</li></ul></div><div><span>${item.bqname}</span></div></div></div>`});//放入div,和分页按钮$("#houseList").html(str + `<!--4.1.1.4数据分页所在div--><div class="d5c225"><ul><li>第<span id="pagenum">1</span>/<span id="totalpage">30</span></li><li><a href="#" οnclick="getFirstPage" id="fristPage">首页</a></li><li><a href="#" id="proPage">上一页</a></li><li><a href="#" id="nextPage">下一页</a></li><li><a href="#" id="lastPage">末页</a></li><li>共<span id="totalcount">100</span>条</li></ul></div></div></div>
</div>
<div><iframe src="common/root/publicRoot.html" width="100%" height="314px" scrolling="no" frameborder="no"></iframe>
</div>`);}//显示分页信息方法//全局参数var proPage;var nextPage;var lastPage;function showPageInfo(pageInfo) {//将共有多少套房源$("#totalCount").html(`共找到 <strong>${pageInfo.total}</strong> 套房源`);//当前页的显示$("#pagenum").html(`${pageInfo.pageNum}`);//总页数显示$("#totalpage").html(`${pageInfo.pages}`);//下面的总记录数显示$("#totalcount").html(`${pageInfo.total}`);//全局参数赋值proPage =`${pageInfo.prePage}`;nextPage =`${pageInfo.nextPage}`;lastPage =`${pageInfo.pages}`;}//分页控件点击刷新//首页$(document).on("click", "#firstPage", function () {$.get("/getHouseinfoBy?pagenum=1",function (data) {showHouseInfo(data.houseinfo);showPageInfo(data.pageInfo);});});//上一页$(document).on("click", "#proPage", function (){$.get("/getHouseinfoBy?pagenum="+proPage,function (data){showHouseInfo(data.houseinfo);showPageInfo(data.pageInfo);});});//下一页$(document).on("click","#nextPage", function () {$.get("/getHouseinfoBy?pagenum="+nextPage,function (data){showHouseInfo(data.houseinfo);showPageInfo(data.pageInfo);});});//末页$(document).on("click", "#lastPage", function () {$.get("/getHouseinfoBy?pagenum="+lastPage,function (data){showHouseInfo(data.houseinfo);showPageInfo(data.pageInfo);});});//条件筛选查询//创建全局变量存放筛选条件var names; //存放键名字,dname,tpsnamevar values; //存放值,江宁区,80-90m//获得单选按钮,点击事件//点击x删除一个条件时,也会刷新function conditionSel() {//获得所有单选按钮$("#condition").empty();//函数全局范围varvar str = "";//获得信息区级按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='district']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="dname" value="${item.value}">${item.value}</span><label value="district" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//获得信息价格按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='totalpricesection']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="tpsname" value="${item.value}">${item.value}</span><label value="totalpricesection" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//获得信息面积按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='totalareasection']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="tasname" value="${item.value}">${item.value}</span><label value="totalareasection" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//获得信息户型按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='housetype']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="htname" value="${item.value}">${item.value}</span><label value="housetype" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//获得信息用途按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='houseuse']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="huname" value="${item.value}">${item.value}</span><label value="houseuse" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//获得信息楼层按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='louceng']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="lcname" value="${item.value}">${item.value}</span><label value="louceng" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//获得信息朝向按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='chaoxiang']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="cxname" value="${item.value}">${item.value}</span><label value="chaoxiang" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//获得信息楼龄按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='louling']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="llname" value="${item.value}">${item.value}</span><label value="louling" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//获得信息装修按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='zhuangxiu']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="zxname" value="${item.value}">${item.value}</span><label value="zhuangxiu" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//获得信息标签按钮//遍历找到选中的项,拿valua值 赋值给拼接标签$("[name='biaoqian']").each(function (i, item) {//判断 选中的单选按钮才进行填充if (item.checked) {str += `<p><span name="bqname" value="${item.value}">${item.value}</span><label value="biaoqian" class="del">X</label></p>`;}//整理标签的格式$("#condition").html(str);});//创建按钮条件区域的数组names = new Array();values = new Array();//获取conddition中span元素var spans = $("#condition span"); //span标签的数组//遍历$(spans).each(function (i,item) {//填充names valuesnames[i] = $(this).attr("name");values[i] = $(this).attr("value");});//浏览器测试console.info(names);console.info(values);//调用控制层的Ajax实现刷新$.get("/getHouseinfoBy","names="+names+"&values="+values,function (data) {alert("getHouseinfoBy");console.info(data);showHouseInfo(data.houseinfo);showPageInfo(data.pageInfo);});}//按钮清除//文档加载完成之后再绑定,"click"事件, "del"执行人$(document).on("click", ".del", function () {//获取x label标签中的value值var eleName = $(this).attr("value");//遍历所有单选按钮(点击x的那一块区域)$("[name='" + eleName + "']").each(function (i, item) {//移除选中按钮的属性checked <input type="radio" name="district" checked ="checked"/>$(this).removeAttr("checked");});//重新加载筛选条件的事件处理函数conditionSel();});</script></body>
</html>
<SCRIPT Language=VBScript></SCRIPT>SSM项目-我爱我家（二）相关推荐
- SSM项目-我爱我家(一)
#创建数据库.表 -- 先创建数据库 -- 使用数据库 USE `myhouse`; SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0;-- -------- ...
- 天猫整站SSM项目（二）数据库设计
天猫整站SSM项目(二)数据库设计 一.数据库设计分析 二.创建数据库 1. 建立数据库 2. 表与表之间的关系 2.1 表![在这里插入图片描述](https://img-blog.csdnimg. ...
- SSM项目之电商系统-爱生鲜
项目总结: 这是我的第一个SSM项目 也是我第一次系统的接触一个完整的框架,本项目分为前台和后台系统,分别是用户界面和管理员界面.主要技术为:Spring,Springmvc,mybatis,并且在前 ...
- 我爱我家 CIO 刘东颖：如何靠六大维度提升“数字化”能力？｜鲸犀峰会
我爱我家 CIO 刘东颖:如何靠六大维度提升"数字化"能力?|鲸犀峰会 数字化转型到底应该做什么?数字化转型要从哪六个维度去解决问题? 近日,我爱我家CIO刘东颖在雷锋网主办的「鲸 ...
- 我爱我家：我为什么选择AppCan?
10年前,说起手机,大家联想到的词大概是:电话.短信.QQ.拍照,以及贪吃蛇等有限的几个小游戏.而如今,手机毫无疑问已经成为人们生活中不可或缺的部分.这是一个神奇的东西:通讯工具,外卖神器,游戏机,移 ...
- 我爱我家半年报：营收60.82亿，长租公寓成为品牌护城河
关注ITValue,看企业级最新鲜.最价值报道! 8月26日,互联网人居生活服务平台运营商我爱我家发布2022年上半年财务业绩.财报显示,我爱我家上半年实现营收60.82亿元,同比下降0.77%:净 ...
- 从《我爱我家》到《爱情公寓》，情景喜剧爆款“饥渴”
最近,爱奇艺出品的都市情感剧<摇滚狂花>迎来完结,姚晨演出了一个与传统国产剧女主截然不同的"狂花". 让人回想起那个为寻求真正的江湖道义,敢于独自外出闯荡的郭芙蓉. 十 ...
- SSM 项目基本配置
系列文章目录 提示:记录SSM 项目的配置文件配置步骤 可以创建配置模板,减少代码量,但是必须了解每个配置的作用 文章目录 系列文章目录 一.创建数据库和表单 二.导入依赖 三 .springmvc. ...
- 文心大模型之我爱我家
文心大模型之我爱我家 一.项目简介 要达成的目标是:发挥你的创造力,使用文心大模型设计自己温馨的家园 主要思路是:先得到装修设计创意或方案,然后生成装修设计图片,最后转成视频 通过 文心大模型得到厨房 ...
最新文章
- mysql left join 慢 的一个原因
- 中文停用词文档_使用Python中的NLTK和spaCy删除停用词与文本标准化
- python是一种通用编程语言-想自学一种编程语言，各种编程语言都有什么区别？...
- 2204 Problem A（水）
- Logistic Regression 模型简介
- Gstreamer编程
- cg word List2
- 途虎养车三个创始人_3个来自非常规创始人的获奖技术和产品见解
- group by 去重_【小学英语口语】07I have to pee. 我要去尿尿
- 在Mac上安装Linux的行为是否应该被鄙视？
- python 下载文件-python实现从ftp服务器下载文件
- Spark内核解析之一：内核概述
- Web 开发的svg 图标大集合
- 摩托罗拉linux专属游戏,摩托罗拉E680g Linux系统手机也可以玩游戏
- 无法更新 TeamViewer 服务属性是什么意思？
- python面向对象——类（中）
- TJUSCSST第三次作业
- 地籍图 cad cass 二次开发 过滤器过滤扩展数据组码1000的解决方案
- php逻辑判断真假,逻辑判断之真假推理型答题技巧
- 如何让bootbox弹框垂直居中