首页 > 程序开发 > web前端 > HTML/CSS >

#使用ajax简单的仿照售房网站上根据城市,区域和街道选择房屋信息

2017-08-17

使用ajax简单的仿照售房网站上根据城市,区域和街道选择房屋信息。

使用ajax简单的仿照售房网站上根据城市,区域和街道选择房屋信息

**ssm框架 **js+ajax+json

数据表

**城市表

这里写图片描述

**区域表

city表中的id和region表中的cityid外键关联

这里写图片描述

**街道表

street表中的regionid和region表中的id外键关联

这里写图片描述

**房屋信息表
表中的city,region,street与对应的表中id字段关联起来
这里写图片描述

=========================
数据库基本搞定之后我们就开始上代码了

先上前台代码,主要是js和ajax和json

多条房屋信息,可以采用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;i<result.length;i++){
                 var id=result[i].id;
                 var city=result[i].city;
                 s_opt="<input id="+id+" onclick=&#39;cityclick(this.id,this.value)&#39; value="+city+" style=&#39;border: none;&#39;>";
                 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;i<result.length;i++){
                 var id=result[i].id;
                 var region=result[i].region;
                 s_opt="<input id="+id+" onclick=&#39;regionclick(this.id,this.value)&#39; value="+region+" style=&#39;border: none;&#39;>";
                 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;i<result.length;i++){
                 var id=result[i].id;
                 var street=result[i].street;
                 s_opt="<input id="+id+" onclick=&#39;streetclick(this.id)&#39; value="+street+" style=&#39;border: none;&#39;>";
                 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;i<result.length;i++){
             if(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="<tr id=dsad  style=&#39;width: 100%;height:50px;&#39; class=houseinfo><td id="+id+"+idonclick=&#39;getHouseId(this.id)&#39; style=&#39;width: 10%;text-align: center;&#39;><img src=&#39;/RealeState/images/houseImg/backg.jpg&#39;/></td><td id="+id+" onclick=&#39;getHouseId(this.id)&#39; style=&#39;width: 90%;text-align: left;&#39;><h3>"
                   +head+"</h3><h4>楼层:"+floor+"/"+allfloor
                   +"朝向:"+toward+"</h4><h4>户型:"
                   +model+"价格:"+price+"元/平米</h4></td></tr>";
                   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 就不多阐述了,相对比较简单,

<mapper namespace="com.ly.rs.dao.HouseSellEmpDao">
    <select id="findHouseSellInfo" resultType="com.ly.rs.entity.HouseSellEmp">
        select * from housesell
    </select>
    <select id="findByStreetHouseSellInfo" resultType="com.ly.rs.entity.HouseSellEmp" parameterType="com.ly.rs.entity.HouseSellEmp">
        select * from housesell where street=#{street}
    </select>
    <select id="findByCityHouseSellInfo" resultType="com.ly.rs.entity.HouseSellEmp" parameterType="com.ly.rs.entity.HouseSellEmp">
        select * from housesell where city=#{city}
    </select>
    <select id="findByIdHouseSellInfo" resultType="com.ly.rs.entity.HouseSellEmp" parameterType="java.lang.Integer">
        select * from housesell where id=#{id}
    </select>
</mapper>

结语:

 新人第一次写博客,希望大家多多包涵,这篇博客主要是用ajax来动态生成内容,取代forEach,顺便表达下ajax的功能之强大,
 这个demo是作者,平时写玩的,可能有代码不规范之处,阐述不清楚的地方,希望大家多多指教,demo使用的是SSM框架。谢谢大家!!!
相关文章
最新文章
热点推荐