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.後言

完~