Maven项目学习（九）SSM项目使用JQuery进行批量添加数据

前言：

       这里展示的是前端将最少1条最多5条的json格式的数据传输到服务器，服务器进行添加数据成功后返回信息到前端，提示添加成功。

 

1.数据库内容

houses表：

booker_id为外键

内容：

2.数据库层

接口类：

package com.myhomes.biz;

import com.myhomes.entity.House;

import java.util.List;

public interface HouseBiz {
    List<House> searchAllHouse();
    List<House> selectAllEmptyHouse();
    House selectByHouseId(String id);
    House searchByBookerId(String id);
    void editTheBookerId(House house);
    House searchByHouseIdName(String houseIdName);
    void addHouseByHouseId(String houseId);
    List<House> searchAllHouseId();
    List<House> searchAllNotEmptyHouse();
}

映射实现文件：（insertHouseByHouseId和selectByHouseIdName）这个id

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.4//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.myhomes.dao.HouseDao">
    <resultMap id="house" type="House">
        <id property="id" column="id" javaType="Integer"></id>
        <result property="houseId" column="house_id" javaType="String"></result>
        <result property="bookerId" column="booker_id" javaType="Integer"></result>
        <association property="user" column="booker_id" javaType="User" select="com.myhomes.dao.UserDao.selectById">

        </association>
    </resultMap>

    <select id="selectAllHouse" resultMap="house">
        select * from houses
    </select>

    <select id="selectAllHouseId" resultMap="house">
        select house_id from houses where house_id != '无'
    </select>

    <select id="selectAllEmptyHouse" resultMap="house">
        select id,house_id from houses where booker_id is null
    </select>

    <select id="selectAllNotEmptyHouse" resultMap="house">
        select id,house_id from houses where booker_id !='' and house_id != '无'
    </select>

    <select id="selectByHouseId" parameterType="Integer" resultMap="house">
        select * from houses where id = #{id}
    </select>

    <select id="selectByBookerId" parameterType="String" resultMap="house">
        select id from houses where house_id=#{id} and booker_id is null
    </select>

    <update id="updateTheBookerId" parameterType="House" >
        update houses set booker_id=#{bookerId}  where  house_id=#{houseId}
    </update>

    <select id="selectByHouseIdName" parameterType="String" resultMap="house">
        select * from houses where house_id = #{houseId}
    </select>

    <insert id="insertHouseByHouseId" useGeneratedKeys="true" keyProperty="id" parameterType="String">
        insert into houses(house_id,booker_id) value (#{houseId},null)
    </insert>


</mapper>

实体类：

package com.myhomes.entity;

public class House {
    private Integer id;
    private String houseId;
    private Integer bookerId;
    private User user;

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getHouseId() {
        return houseId;
    }

    public void setHouseId(String houseId) {
        this.houseId = houseId;
    }

    public Integer getBookerId() {
        return bookerId;
    }

    public void setBookerId(Integer bookerId) {
        this.bookerId = bookerId;
    }

    @Override
    public String toString() {
        return "House{" +
                "id=" + id +
                ", houseId='" + houseId + '\'' +
                ", bookerId=" + bookerId +
                '}';
    }
}

3.服务层

接口类：

package com.myhomes.biz;

import com.myhomes.entity.House;

import java.util.List;

public interface HouseBiz {
    List<House> searchAllHouse();
    List<House> selectAllEmptyHouse();
    House selectByHouseId(String id);
    House searchByBookerId(String id);
    void editTheBookerId(House house);
    House searchByHouseIdName(String houseIdName);
    void addHouseByHouseId(String houseId);
    List<House> searchAllHouseId();
    List<House> searchAllNotEmptyHouse();
}

实现类：

package com.myhomes.biz.impl;

import com.myhomes.biz.HouseBiz;
import com.myhomes.dao.HouseDao;
import com.myhomes.entity.House;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Service;

import java.util.List;

@Service("houseBiz")
public class HouseBizImpl implements HouseBiz {

    @Autowired
    @Qualifier(value = "houseDao")
    private HouseDao houseDao;

    public List<House> searchAllHouse() {
        return houseDao.selectAllHouse();
    }

    public List<House> selectAllEmptyHouse() {
        return houseDao.selectAllEmptyHouse();
    }

    public House selectByHouseId(String id) {
        Integer houseId = Integer.parseInt(id);
        return houseDao.selectByHouseId(houseId);
    }

    public House searchByBookerId(String id) {
        return houseDao.selectByBookerId(id);
    }

    public void editTheBookerId(House house) {
        houseDao.updateTheBookerId(house);
    }

    public House searchByHouseIdName(String houseIdName) {
        return houseDao.selectByHouseIdName(houseIdName);
    }

    public void addHouseByHouseId(String houseId) {
        houseDao.insertHouseByHouseId(houseId);
    }

    public List<House> searchAllHouseId() {
        return houseDao.selectAllHouseId();
    }

    public List<House> searchAllNotEmptyHouse() {
        return houseDao.selectAllNotEmptyHouse();
    }

}

4.控制器层

package com.myhomes.controller;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.myhomes.biz.HouseBiz;
import com.myhomes.entity.House;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

    Map<String,Object> result = new HashMap<>();

    @Autowired
    HouseBiz houseBiz;

    @RequestMapping(value = "/listAll")
    public ModelAndView listAll(@RequestParam(name = "pageNo",defaultValue = "1") int pageNo, @RequestParam(name = "pageSize",defaultValue = "15") int pageSize){
        Page<?> page = PageHelper.startPage(pageNo,pageSize);
        List<House> list = houseBiz.searchAllHouse();
        PageInfo<?> pageInfo = page.toPageInfo();

        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("houseList",list);

        modelAndView.addObject("pageHelper2",pageInfo);
        modelAndView.setViewName("houses_list");
        return modelAndView;
    }

    @RequestMapping(value = "/to_add")
    public String toAdd(){
        return "houses_add";
    }

    //@RequestMapping(value = "/Add",method = RequestMethod.POST,produces = "application/json;")
    @RequestMapping(value = "/Add",method = RequestMethod.POST,produces = "application/json;charset:UTF-8")
    @Transactional
    @ResponseBody
    public Map<String,Object> Add(@RequestBody List<House> list){
        System.out.println("进入添加控制器");
        int count = 0;
        for (House house : list){
            if (!house.getHouseId().equals("")){
                //查找提交过来的的房间号在数据库表中是否已经存在
                House house1 = houseBiz.searchByHouseIdName(house.getHouseId());
                if (house1 == null){
                    houseBiz.addHouseByHouseId(house.getHouseId());
                    System.out.println("houseId:" + house.getHouseId());
                    count = count + 1;
                }
            }
        }
        result.put("success",true);
        result.put("counts",count);

        return result;
    }

}

5.前端

添加页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<jsp:include page="top.jsp"></jsp:include>

<section id="right">
    <a id="user_local">
        基本管理&nbsp;&nbsp;&nbsp;->&nbsp;&nbsp;添加房间
    </a>
    <div id="housesadd_div">
        <div id="housesadd_body">
            <p>
                <a id="housesadd_a">房间号：</a>
                <input type="text" maxlength="4" name="housesId" placeholder="可添加多个..." onkeyup="this.value=this.value.replace(/[^\w\.\/]/ig,'')"/>
                <input type="button" value=" - " id="housesadd_delimg0" onclick="del(this)">
            </p>
        </div>
        <input type="button" value=" + " id="housesadd_addimg" onclick="add()"></br></br>
        <button type="submit" id="housesadd_btn" onclick="">批量添加</button>
        <button id="return2_btn" onclick="javascript:window.history.go(-1)">返回</button>

    </div>
</section>
<script type="text/javascript" src="/js/housesAdd.js">

</script>
<jsp:include page="buttom.jsp"></jsp:include>

js部分：

var i = 0;
function add(){
    var num = $("p","#housesadd_body").length;
    if(num >= 5){
        alert("最多有5个！");
        return false;
    }

    i++;
    var p = "<p><a id='housesadd_a'>房间号： </a>"+
        "<input type='text' maxlength='4' name='housesId' placeholder='可添加多个...' onkeyup='this.value=this.value.replace(/[^\w\.\/]/ig,'')'/> "+
        "<input type='button' value=' - ' id='housesadd_delimg' onclick='del(this)'>"
    "</p>";
    $("#housesadd_body").append(p);
}

function del(obj){
    var num = $("p","#housesadd_body").length;
    if(num === 1){
        alert("至少保留1个！");
        return false;
    }
    i--;
    obj.parentElement.remove();
}
$(document).ready(function(){
    $("#housesadd_btn").click(function(){
        if($("input[name=housesId]").val()===""){
            alert("输入框不能全部为空！");
            return false;
        }
        var list = [];
        $("#housesadd_body p").each(function(i,obj){
            list.push(
                {
                    id : i,
                    houseId : $("input[name='housesId']",obj).val()
                }
            );
        });
        console.log(list);
        $.ajax({
            type:"post",
            url:"/house/Add",
            contentType:"application/json;charset:UTF-8",
            dataType:"json",
            data:JSON.stringify(list),
            success:function (data) {
                if (data.success){
                    alert("成功添加"+data.counts+"条数据！");
                    window.location.href="/house/listAll";
                }
            },
            error:function () {
                alert("系统错误！");
            }
        });
    });
});

6.演示

步骤一、启动项目后访问网站

点击“查看房间”管理查看数据：

步骤二、进入批量添加房间号的数据页面

步骤三、输入5条符合要求且不重复的数据

点击“批量添加”按钮后前端显示结果：

后台控制器打印结果：

数据库表查看数据：

步骤四、添加为空或已存在的房间号名称

点击“批量添加”按钮后的结果：

       E101数据库已经存在了，因此不会被添加；房间号为空，则没有添加成功；房间号E201不存在数据库表中，则添加；第四个房间号跟第三的房间号一样，则不能添加；综上，成功添加1条数据的提示没有错。

后台控制器打印：

查看数据库：

7.后言

完~