ssm框架前后端数据交互完整示例

　1、sprinMvc控制层

package com.dengfeng.house.controller;

import java.text.ParseException;
import java.util.Date;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.dengfeng.house.pojo.District;
import com.dengfeng.house.pojo.House;
import com.dengfeng.house.pojo.HouseQuery;
import com.dengfeng.house.pojo.Street;
import com.dengfeng.house.pojo.Type;
import com.dengfeng.house.pojo.User;
import com.dengfeng.house.service.IDistrictService;
import com.dengfeng.house.service.IHouseService;
import com.dengfeng.house.service.IStreetService;
import com.dengfeng.house.service.ITypeService;

@Controller
@RequestMapping("/house")
public class HouseController {

    @Resource
    private IHouseService houseService;
    @Resource
    private ITypeService typeService;
    @Resource
    private IDistrictService districtService;
    @Resource
    private IStreetService streetService;

    //manage页面全查
    @RequestMapping("/findAll")
    @ResponseBody
    public PageInfo findAll(@RequestParam(defaultValue="1")int pageIndex){

        PageHelper.startPage(pageIndex, 3);
        List<House> housList = houseService.selectHouse();
        PageInfo pageInfo=new PageInfo<House>(housList);
        return pageInfo;
    }

    //修改渲染
    @RequestMapping("/update/{id}")
    public String update(Model model,@PathVariable int id){
        List<Type> typeList = typeService.findAllType();
        List<District> districtList = districtService.findAllDistrict();
        List<Street> streetList= streetService.findAllStreet();
        House house = houseService.findHouseById(id);
        model.addAttribute("house", house);
        model.addAttribute("typeList", typeList);
        model.addAttribute("districtList", districtList);
        model.addAttribute("streetList", streetList);
        return "/page/update";
    }

    //保存修改
    @RequestMapping("/updateSave")
    public String update(House house){
        houseService.alterHouse(house);
        return "redirect:/page/manage.jsp";
    }

    //渲染增加,下拉框推荐用ajxj做，，=所有这个方法没什么用
    @RequestMapping("/add")
    public String add(Model model){
        List<Type> typeList = typeService.findAllType();
    /*    List<District> districtList = districtService.findAllDistrict();
        List<Street> streetList= streetService.findAllStreet();*/

        model.addAttribute("typeList", typeList);
    /*    model.addAttribute("districtList", districtList);
        model.addAttribute("streetList", streetList);
        */

        return "/page/add";
    }

    //真正保存增加的方法
    @RequestMapping("/addSave")
    public String addSave(House house,HttpSession session){

        houseService.insertHouse(house);
        return "redirect:/page/manage.jsp";

    }

    /*house_list.jsp查询。*/
    @RequestMapping("/find")
    @ResponseBody
    public List<House> find(HouseQuery houseQuery,String money,String size){
        //如果是选中状态
        if(money!=null&&!money.equals("")){
            String[] moneyArray=money.split("-");
            houseQuery.setMinPrice(Integer.parseInt(moneyArray[0]));
            houseQuery.setMaxPrice(Integer.parseInt(moneyArray[1]));
        }
        if(size!=null&&!size.equals("")){
            String[] sizeArray=size.split("-");
            houseQuery.setMinFloorAge(Integer.parseInt(sizeArray[0]));
            houseQuery.setMaxFloorAge(Integer.parseInt(sizeArray[1]));
        }
        List<House> list = houseService.find(houseQuery);

        return list;
    }

    //推荐，多条件模糊查询
/*    @RequestMapping("/findAllHouseList")
    @ResponseBody
    public PageInfo<House> findAll(HttpSession session,@RequestParam(defaultValue="1")Integer pageIndex,
            @RequestParam(defaultValue="")String title,
            @RequestParam(defaultValue="")String price,
            @RequestParam(defaultValue="")Integer typeId,
            @RequestParam(defaultValue="0")String floorage,Date beginTime,Date endTime) throws ParseException{
        User user=(User)session.getAttribute("userSession");
        String[] prices = price.split("-");
        String[] floorages = floorage.split("-");

        if(user!=null) {
            PageHelper.startPage(pageIndex,2);
            House house =new House ();
            house.setTitle(title);
            house.setMinPrice(Integer.parseInt(prices[0]));
            house.setMaxPrice(Integer.parseInt(prices[1]));
            house.setTypeId(typeId);
            house.setMinFloorage(Integer.parseInt(floorages[0]));
            house.setMaxFloorage(Integer.parseInt(floorages[1]));
            if(beginTime!=null && endTime!=null){
                house.setBeginTime(beginTime);
                house.setEndTime(endTime);
            }else if(beginTime!=null){
                house.setBeginTime(beginTime);
            }else if(endTime!=null){
                house.setEndTime(endTime);
            }
            List<House> list = houseService.findByCondition(house);
            PageInfo<House> pageInfo=new PageInfo<House>(list);
            return pageInfo;

        }
        return new PageInfo<House>();
    }*/

    //删除房子
    @RequestMapping("/deleteById")
    @ResponseBody
    public String delete(int id){
        houseService.deletehouse(id);
        return "删除成功";
    }
}

---

　2、前端页面

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
int total = (Integer)request.getAttribute("total");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户管理</title>
<%--     <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}css/style.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/function.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.min.js"></script> --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/function.js"></script>

        <style type="text/css">
        /*     .space{
                    给js里的td设置字体颜色有效
                    color: red
            } */
        </style>

</head>
<body>
<input type="hidden" id="path" value="${pageContext.request.contextPath}"/>

<div id="header" class="wrap">
    <div id="logo"></div>
    <div class="search">
        <label class="ui-green"><a href="${pageContext.request.contextPath }/house/add"><input type="button" name="search" value="发布房屋信息" /></a></label>
        <label class="ui-green"><a href="${pageContext.request.contextPath }/user/logout"><input type="button" name="search" value="退       出" /></a></label>
    </div>
</div>
<div class="main wrap">
<div id="houseArea">

<!--     <table class="house-list">
        有房屋
        <tr>
            <td class="house-thumb">
            <span>
                <img src="data:images/thumb_house.gif" />
            </span>
            </td>

            <td>
                <dl>
                    <dt>
                <a href="#">sss</a>
                </dt>
                    <dd>
                        dddd   区，
                        ddddd  街，
                        10000    平米<br/>
                        联系方式     ssss

                    </dd>
                </dl>
            </td>

            自己发布的信息有权限删除
            <td class="house-type"><label class="ui-green"><input type="button"  name="search" value="修    改" /></label></td>
            <td class="house-price"><label class="ui-green"><input type="button" name="search" value="删    除" /></label></td>

            不是自己发布的信息没有权限删除
            <td colspan="2"></td>

        </tr>
    无房屋
    <tr>
        <td>无房屋信息输出</td>
    </tr>

    </table>
</div -->

          <!-- 这个隐藏框用于分页查询 -->
      <input type="hidden" name="pageIndex" value="1"/>

        <table class="house-list">
            <!-- <img src="../images/thumb_house.gif" /> -->
        </table>

         <div class="page-bar">
            <ul class="page-num-ul clearfix">
                <li>共${param.totalCount }条记录&nbsp;&nbsp; ${param.currentPageNo }/${param.totalPageCount }页</li>
                <c:if test="${param.currentPageNo > 1}">
                    <a href="javascript:page_nav(document.forms[0],1);">首页</a>
                    <a href="javascript:page_nav(document.forms[0],${param.currentPageNo-1});">上一页</a>
                </c:if>
                <c:if test="${param.currentPageNo < param.totalPageCount }">
                    <a href="javascript:page_nav(document.forms[0],${param.currentPageNo+1 });">下一页</a>
                    <a href="javascript:page_nav(document.forms[0],${param.totalPageCount });">最后一页</a>
                </c:if>
                &nbsp;&nbsp;
            </ul>
            <!--  <span class="page-go-form"><label>跳转至</label>
                 <input type="text" name="inputPage" id="inputPage" class="page-key" />页
                 <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
             </span> -->
        </div>    

    <!-- <div class="pager">

        <ul>
            <li class="current">
                <a href="#">首页</a>
            </li>
            <li>
                <a href='#'>上一页</a>
            </li>
            <li>
                <a href='#'>下一页</a>
            </li>
            <li>
                <a href='#'>末页</a>
            </li>
        </ul>
        <span class="total">共 页</span>
    </div> -->
</div>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/manage.js"></script>
</body>
</html>

---

 

3、JS代码

<script type="text/javascript">
var path;

$(function(){
    alert("1")
    path=$("#path").val();
    findHouse();

});

/* 页面一加载完就调用走这个函数 */

//这个方法用于查找所有
function findHouse(){
    /*alert("2")*/
        $.post(path+"/house/findAll",{"pageIndex":$("[name='pageIndex']").val()},function(data){
        /* 每次获取用户列表，都需要将上一次的结果清除 */
            /*alert("3")*/
            $("tr").remove();
            $(data.list).each(function(i,e){
                /*alert("6")*/
            var    content="<tr>";
                content+="<td class=\"house-thumb\"><span><img src=\"../images/thumb_house.gif\" /></span></td>";

                content+="<td class=\"space\"><dl><dt><a href=\"#\">"+e.title+"</a></dt>";
                content+="<dd>"+e.districtName+"区"+"";
                content+="<span style=\"margin-left:20px\"></span>";
                content+=""+e.streetName+"街"+"";
                content+="<span style=\"margin-left:20px\"></span>";
                content+=""+"面积"+e.floorage+"平米"+"<br/>";
                content+=""+"联系方式："+e.contact+"</dd></dl></td>";            

                /* this指a标签自己 ,javascript:void(0)的意思是让这个标签有a标签的样式，但没有a标签的功能，找到a标签自己把父节点删除，tr*/
                content+="<td class=\"house-type\"><label class=\"ui-green\"><a href=\""+path+"/house/update/"+e.id+"\" class=\"modifyBill\"><input type=\"button\"   name=\"search\" value=\"修    改\" />"+"</a></label></td>"+
                "<td class=\"house-price\"><label class=\"ui-green\"><input type=\"button\"  name=\"search\"   onclick=\"deleteHouse("+e.id+",this)\" value=\"删   除\" />"+"</label></td>";
                content+="</tr>";

                $("table").append(content);
            });

            //开始覆盖分页节点
            $(".page-num-ul li").html("共"+data.total+"条记录&nbsp;&nbsp; "+data.pageNum+"/"+data.pages+"页");
            //每次添加上一页、下一页都要把上一次的结果清除，否则会累加
            $(".page-num-ul a").remove();

            //动态的添加上一页、下一页
            if(!data.isFirstPage){
                $(".page-num-ul").append("<a href=\"javascript:jump(1)\">首页</a>"+
                    "<a href=\"javascript:jump("+(data.pageNum-1)+")\">上一页</a>");
            }
            if(!data.isLastPage){
                $(".page-num-ul").append("<a href=\"javascript:jump("+(data.pageNum+1)+")\">下一页</a>"+
                    "<a href=\"javascript:jump("+(data.pages)+")\">末页</a>");
            }
        },"json");
}

function jump(pageNum){
    //动态的修改当前页数
    $("[name='pageIndex']").val(pageNum);
    //提交
    findHouse();
}

function update(id){
    alert("3")
    /* 上面a标签点击事件调用方法时候 把商品的id传了过来，再把这个商品的id传到后台*/
    $.post(path+"/house/update",{"id":id},function(data){

        /*alert(data);*/
        /*onclick=\"update("+e.id+")\"
*/        },"text");
}

function deleteHouse(id,a){
    /* 上面a标签点击事件调用方法时候 把商品的id传了过来，再把这个商品的id传到后台*/
    $.post(path+"/house/deleteById",{"id":id},function(data){
        //现在后台已经删除成功了，前台页面也需要从对应的节点删掉
        alert(data);
        $(a).parents("tr").remove();
        },"text");
}

　//时间函数，从数据库拿的时间需要处理一下才能正确显示在前端,直接在ajax调用这个函数即可
function getDateTime(obj){
    var date = new Date(parseInt(obj,10));
    //月份得+1，且只有个位数时在前面+0
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    //日期为个位数时在前面+0
    var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    //拼接日期显示格式

    var hours = date.getHours()<10?"0"+date.getHours():date.getHours();
    var minutes = date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
    var seconds = date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();
    var newTime = date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+minutes+":"+seconds;
    return newTime;
}
</script>