ajax实现表单增删改,bootstrap+Ajax+SSM(maven搭建)表单增删改查

最新推荐文章于 2022-08-27 07:05:42 发布

妞妞脾气灰常大

最新推荐文章于 2022-08-27 07:05:42 发布

阅读量838

点赞数 1

文章标签： ajax实现表单增删改

前后端分离，前端利用ajax调用后端API接收json数据,进行表单的增删改查

软件架构

IDE：IDEA

数据库：mysql

jdk:1.8

tomcat:9

后端：springmvc，mybatis

前端：bootstrap

效果图：

e7d08874f802

增删改查效果图

项目结构：

e7d08874f802

项目结构

pom.xml

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

4.0.0

com.ssm.demo

ssm-demo

1.0-SNAPSHOT

war

ssm-demo Maven Webapp

http://www.example.com

UTF-8

UTF-8

1.7

1.7

4.2.4.RELEASE

1.8

3.2.5

1.2.2

5.1.38

1.7.4

3.1.0

2.2

1.2

1.0.25

2.7

junit

junit

4.11

test

org.springframework

spring-core

${org.springframework.version}

org.springframework

spring-beans

${org.springframework.version}

org.springframework

spring-context

${org.springframework.version}

org.springframework

spring-jdbc

${org.springframework.version}

org.springframework

spring-tx

${org.springframework.version}

org.springframework

spring-web

${org.springframework.version}

org.springframework

spring-webmvc

${org.springframework.version}

org.springframework

spring-test

${org.springframework.version}

commons-collections

commons-collections

3.2.2

commons-fileupload

commons-fileupload

1.3.2

commons-io

commons-io

2.5

mysql

mysql-connector-java

${jdbc.driver.version}

runtime

com.alibaba

druid

${com.alibaba.druid.version}

com.fasterxml.jackson.core

jackson-core

2.5.2

com.fasterxml.jackson.core

jackson-databind

2.5.2

org.mybatis

mybatis

${mybatis.version}

org.mybatis

mybatis-spring

${mybatis-spring.version}

com.github.pagehelper

pagehelper

5.1.2

org.aspectj

aspectjrt

${aspectj.version}

org.aspectj

aspectjweaver

${aspectj.version}

javax.servlet

javax.servlet-api

${javax.servlet-api.version}

provided

javax.servlet.jsp

jsp-api

${jsp-api.version}

taglibs

standard

1.1.2

jstl

jstl

1.2

com.fasterxml.jackson.core

jackson-core

2.8.5

com.fasterxml.jackson.core

jackson-annotations

2.8.5

com.fasterxml.jackson.core

jackson-databind

2.8.5

ssm-demo

org.apache.maven.plugins

maven-compiler-plugin

3.6.1

utf-8

首先是配置文件，applicationContext.xml,springmvc.xml,mybatis-config.xml,web.xml

applicationContext

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:aop="http://www.springframework.org/schema/aop"

xmlns:tx="http://www.springframework.org/schema/tx"

xmlns:context="http://www.springframework.org/schema/context"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans.xsd

http://www.springframework.org/schema/tx

http://www.springframework.org/schema/tx/spring-tx.xsd

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context.xsd">

springmvc.xml

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:context="http://www.springframework.org/schema/context"

xmlns:mvc="http://www.springframework.org/schema/mvc"

xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd

http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd

http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">

class="org.springframework.web.servlet.view.InternalResourceViewResolver">

mybatis-config.xml 为了配置分页插件

web.xml

xmlns:web="http://java.sun.com/xml/ns/javaee" xmlns="http://java.sun.com/xml/ns/javaee"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"

id="WebApp_ID" version="3.0">

Archetype Created Web Application

index.html

org.springframework.web.context.ContextLoaderListener

contextConfigLocation

classpath:applicationContext.xml

encodingFilter

org.springframework.web.filter.CharacterEncodingFilter

encoding

UTF-8

encodingFilter

/*

springmvc

org.springframework.web.servlet.DispatcherServlet

contextConfigLocation

classpath:springmvc.xml

1

springmvc

/

DruidStatView

com.alibaba.druid.support.http.StatViewServlet

DruidStatView

/druid/*

druidWebStatFilter

com.alibaba.druid.support.http.WebStatFilter

exclusions

/public/*,*.js,*.css,/druid*,*.jsp,*.swf

principalSessionName

sessionInfo

profileEnable

true

druidWebStatFilter

/*

实体类

User

package com.ssm.entity;

import com.alibaba.excel.metadata.BaseRowModel;

import java.io.Serializable;

/**

* Created by jiangfeixiang on 2018/9/4

* @author smfx1314

*

*/

public class User extends BaseRowModel implements Serializable {

private Integer id;

private String username;

private String sex;

private String city;

private Integer age;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

public String getSex() {

return sex;

}

public void setSex(String sex) {

this.sex = sex;

}

public String getCity() {

return city;

}

public void setCity(String city) {

this.city = city;

}

public Integer getAge() {

return age;

}

public void setAge(Integer age) {

this.age = age;

}

@Override

public String toString() {

return "User{" +

"id=" + id +

", username='" + username + '\'' +

", sex='" + sex + '\'' +

", city='" + city + '\'' +

", age=" + age +

'}';

}

}

dao层

UserMapper接口

package com.ssm.dao;

import com.ssm.entity.User;

import org.springframework.stereotype.Repository;

import java.util.List;

/**

* Created by jiangfeixiang on 2018/9/4

* @author smfx1314

*/

@Repository

public interface UserMapper {

/**

* 查询所有用户

* @return

*/

List getAllUser();

/**

*

* @param username

* @return

*/

User checkUserName(String username);

/**

* 保存用户

* @param user

* @return

*/

int saveUser(User user);

/**

* 根据id删除用户

* @param id

* @return

*/

int deleteUser(Integer id);

/**

* 修改用户

* @param user

*/

void updateUser(User user);

}

对应的UserMapper.xml

SELECT * FROM USER

SELECT * FROM USER WHERE username=#{username}

INSERT INTO USER(username,sex,city,age) VALUES(#{username},#{sex},#{city},#{age})

UPDATE USER SET username=#{username},sex=#{sex},city=#{city},age=#{age} WHERE id=#{id}

DELETE FROM USER WHERE id=#{id}

service层

UserService接口

package com.ssm.service;

import com.ssm.entity.User;

import java.util.List;

/**

* Created by jiangfeixiang on 2018/9/4

*/

public interface UserService {

/**

* 返回所有用户

* @return

*/

List getAllUser();

/**

* 校验用户名

* @param username

* @return

*/

User checkUserName(String username);

/**

* 保存用户

* @param user

* @return

*/

int saveUser(User user);

/**

* 删除用户根据id

* @param id

* @return

*/

int deleteUser(Integer id);

/**

* 修改用户

* @param user

*/

void updateUser(User user);

}

UserServiceImpl实现类

package com.ssm.service.impl;

import com.ssm.dao.UserMapper;

import com.ssm.entity.User;

import com.ssm.service.UserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import org.springframework.transaction.annotation.Transactional;

import java.util.List;

/**

* Created by jiangfeixiang on 2018/9/4

*/

@Service

@Transactional

public class UserServiceImpl implements UserService {

@Autowired

private UserMapper userMapper;

/**

* 查询所有用户

* @return

*/

@Override

public List getAllUser() {

List allUser = userMapper.getAllUser();

return allUser;

}

/**

* 校验用户名

* @param username

* @return

*/

@Override

public User checkUserName(String username) {

return userMapper.checkUserName(username);

}

/**

* 保存用户

* @param user

* @return

*/

@Override

public int saveUser(User user) {

int i = userMapper.saveUser(user);

return i;

}

/**

* 修改用户

*/

@Override

public void updateUser(User user) {

userMapper.updateUser(user);

}

/**

* 根据id删除用户

* @param id

* @return

*/

@Override

public int deleteUser(Integer id) {

return userMapper.deleteUser(id);

}

}

Controller层

UserController

package com.ssm.controller;

import com.github.pagehelper.PageHelper;

import com.github.pagehelper.PageInfo;

import com.ssm.common.ResultData;

import com.ssm.entity.User;

import com.ssm.service.UserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.*;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

/**

* Created by jiangfeixiang on 2018/9/4

* @author

*/

@Controller

@RequestMapping(value = "/user")

public class UserController {

@Autowired

private UserService userService;

/**

*这里统一返回ResultData封装的json数据格式，不在用Map形式了

* @return

*/

@RequestMapping(value = "/getAllUser",method = RequestMethod.GET)

@ResponseBody

public ResultData getAllUser(@RequestParam(defaultValue="1",required=true,value="pn") Integer pn){

Map map = new HashMap<>();

/**

* 每页显示记录数

*

*/

Integer pageSize=5;

/**

* 分页查询，注意顺序，startPage()方法放前面

*/

PageHelper.startPage(pn, pageSize);

/**

* 获取所用用户信息

*/

List allUser = userService.getAllUser();

/**

* 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。

* 封装了详细的分页信息,传入连续显示的页数

*/

PageInfo pageInfo=new PageInfo(allUser);

// map.put("code",100);

// map.put("msg","成功");

// map.put("pageInfo",pageInfo);

//return map;

return ResultData.success(pageInfo);

}

/**

* 校验用户名

* @param username

* @return

*/

@RequestMapping(value = "/checkUser/{username}",method = RequestMethod.POST)

@ResponseBody

public ResultData checkUserName(@PathVariable("username") String username){

//校验用户名

User user = userService.checkUserName(username);

System.out.println(user);

return ResultData.success(user);

}

/**

* 保存用户信息

* @param user

* @return

*/

@RequestMapping(value = "/saveUser",method = RequestMethod.POST)

@ResponseBody

public ResultData saveUser(@RequestBody User user){

int i = userService.saveUser(user);

return ResultData.success();

}

/**

* 修改员工信息(更新)

*/

@RequestMapping(value = "/updateUser",method = RequestMethod.POST)

@ResponseBody

public ResultData updateUser(@RequestBody User user){

System.out.print(user);

userService.updateUser(user);

return ResultData.success();

}

/**

* 根据id删除用户

*/

@RequestMapping(value = "/deleteUser/{id}",method = RequestMethod.DELETE)

@ResponseBody

public ResultData deleteUser(@PathVariable("id")Integer id){

//保存用户

int i = userService.deleteUser(id);

System.out.println(i);

return ResultData.success();

}

}

为了Controller统一返回json数据格式，所以封装了ResultData

ResultData

package com.ssm.common;

/**

* @Author: 姜飞祥

* @Description: 封装结果集成统一的json样式

* @Date: Create in 2018/9/15 12:08

* @param: $params$

* @return: $returns$

*/

public class ResultData{

/**

* 信息状态码，0表示成功，1表示失败

*/

private Integer code;

/**

* 提示信息

*/

private String msg;

/**

* 返回的对象,因为有分页信息，方便返回json数据见名之意，这里直接变量名为pageInfo。

*/

private T pageInfo;

/**

* 成功时调用的函数

* @param object 要返回的对象

* @return

*/

public static ResultData success(Object object) {

ResultData result = new ResultData();

result.setCode(200);

result.setMsg("成功");

result.setPageInfo(object);

return result;

}

/**

* 成功时，如果没有要返回的对象，调用此方法

* @return

*/

public static ResultData success() {

ResultData result = new ResultData();

result.setCode(200);

result.setMsg("成功");

result.setPageInfo(null);

//return success(null);

return result;

}

/**

* 失败时调用的函数

* @return

*/

public static ResultData fail() {

ResultData result = new ResultData();

result.setCode(100);

result.setMsg("失败");

return result;

}

public Integer getCode() {

return code;

}

public void setCode(Integer code) {

this.code = code;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

public T getPageInfo() {

return pageInfo;

}

public void setPageInfo(T pageInfo) {

this.pageInfo = pageInfo;

}

@Override

public String toString() {

return "ResultData{" +

"code=" + code +

", msg='" + msg + '\'' +

", pageInfo=" + pageInfo +

'}';

}

}

下面是前端代码

index.html

用户管理

用户管理

新增

删除

ID姓名性别城市年龄操作

当前第页，总共页，总共条记录

index.js

$(function () {

var totalRecord,currentPage;

//1.显示所有数据

to_page(1);

//2.添加用户

addUser();

//3.修改用户

reviseUser();

//4.单个删除用户

deleteUser();

/**

* 1.显示所用用户

* @param pn

*/

function to_page(pn) {

$.ajax({

url: "/user/getAllUser",

data:"pn="+pn,

type: "GET",

dataType: "json",

contentType:"application/json;charset=UTF-8",

success: function (data) {

//alert(data.msg);

//解析并显示员工数据表

build_users_table(data)

//2.解析并显示分页信息

build_page_info(data);

//3.解析并显示分页条数据

build_page_nav(data);

}

})

}

/**

* 解析并显示员工数据表

* @param data

*/

function build_users_table(data) {

//清空table表格

$("#users_table tbody").empty();

var users = data.pageInfo.list;

//遍历元素

$.each(users, function (index, item) {

var checkBox=$("

");

var id = $("

").append(item.id);

var username = $("

").append(item.username);

var sex = $("

").append(item.sex);

var city = $("

").append(item.city);

var age = $("

").append(item.age);

var button1 = $("").addClass("btn btn-primary btn-sm edit_btn").append($("").addClass("glyphicon glyphicon-pencil").attr("aria-hidden", true)).append("编辑");

var button2 = $("").addClass("tn btn-danger btn-sm delete_btn").append($("").addClass("glyphicon glyphicon-trash").attr("aria-hidden", true)).append("删除");

var td_btn = $("

").append(button1).append(" ").append(button2);

$("

").append(checkBox).append(id).append(username).append(sex).append(city).append(age)

.append(td_btn ).appendTo("#users_table tbody");

})

}

/**

* 解析显示分页信息

* @param data

*/

function build_page_info(data) {

$("#page_info_area").empty();

$("#page_info_area").append("当前" + data.pageInfo.pageNum + "页,总共" + data.pageInfo.pages +

"页，总共" + data.pageInfo.total + "条记录");

totalRecord = data.pageInfo.total;

currentPage=data.pageInfo.pageNum;

}

/**

* 解析显示分页导航条

* @param data

*/

function build_page_nav(data) {

$("#page_nav_area").empty();

var ul = $("

var firstPageLi = $("

").append($(" ").append("首页").attr("href", "#"));

var prePageLi = $("

").append($(" ").append("«").attr("href", "#"));

var nextPageLi = $("

").append($(" ").append("»").attr("href", "#"));

var lastPageLi = $("

").append($(" ").append("末页").attr("href", "#"));

//如果没有前一页，前一页和首页就不能点

if (data.pageInfo.hasPreviousPage == false) {

firstPageLi.addClass("disabled");

prePageLi.addClass("disabled");

} else {

//首页

firstPageLi.click(function () {

to_page(1);

});

prePageLi.click(function () {

to_page(data.pageInfo.pageNum - 1);

});

}

if (data.pageInfo.hasNextPage == false) {

nextPageLi.addClass("disabled");

lastPageLi.addClass("disabled");

} else {

//构建点击事件

nextPageLi.click(function () {

to_page(data.pageInfo.pageNum + 1);

});

lastPageLi.click(function () {

to_page(data.pageInfo.lastPage);

})

}

//添加首页和前一页

ul.append(firstPageLi).append(prePageLi);

//遍历添加页码

$.each(data.pageInfo.navigatepageNums, function (index, item) {

var numLi = $("

").append($(" ").append(item).attr("href", "#"));

//如果是当前选中页面，添加active标识

if (data.pageInfo.pageNum == item) {

numLi.addClass("active");

}

//给每个页码添加点击就跳转

numLi.click(function () {

to_page(item);

});

ul.append(numLi);

});

//添加下一页和末页

ul.append(nextPageLi).append(lastPageLi);

var navEle = $("").append(ul);

navEle.appendTo("#page_nav_area");

}

/**

* 2.实现新增功能

* @returns {boolean}

*/

function addUser() {

//为新增按钮添加modal

$("#user_add_modal_btn").click(function () {

//清除表单数据

$("#userAddModal form")[0].reset();

$("#userAddModal").modal({

backdrop: "static"

})

});

/**

* 2.保存用户信息

* 校验该用户是否存在,如果存在就不能添加该用户

*/

$("#username_add_input").change(function () {

var username = $("#username_add_input").val();

//发送Ajax请求校验姓名是否可用

$.ajax({

url: "/user/checkUser/"+username,

//data: "username=" + username,

type: "POST",

success: function (data) {

//alert(data.pageInfo.username);

//表示成功，用户名可用

if (data.code == 200 && data.pageInfo != null) {

alert("用户名**"+ data.pageInfo.username +"**已经存在");

$("#user_save_btn").attr("ajax-va", "error");

} else if (data.code == 200 && data.pageInfo == null) {

//为保存按钮添加属性

$("#user_save_btn").attr("ajax-va", "success");

}

}

})

});

/**

* 保存用户信息

*/

$("#user_save_btn").click(function () {

var username = $("#username_add_input").val();

var sex =$("input[name=sex]:checked").val();

var city =$("#city_add_input").val();

var age =$("#age_add_input").val();

//2.发送ajax请求保存员工

$.ajax({

url: "/user/saveUser",

type: "POST",

data: JSON.stringify({username:username,sex:sex,city:city,age:age}),

dataType:"json",

contentType:"application/json;charset=UTF-8",

success: function (data) {

if (data.code == 200){

//1.关闭modal框

$("#userAddModal").modal('hide');

//2.来到最后一页，显示刚才保存的数据

to_page(totalRecord);

}

}

});

});

}

/**

* 3.修改用户

*/

function reviseUser() {

//为编辑按钮绑定弹出modal框事件

//1.因为在按钮创建之前就绑定了click，所以用普通click方法绑定不上

$(document).on("click",".edit_btn",function () {

//清除表单数据

$("#userReviseModal form")[0].reset();

$("#username_revise_input").next("span").text("");

//修改框中用户信息回显

var id= $(this).parent().parent().children("td").eq(1).text();

//将id的值传递给修改按钮的属性，方便发送Ajax请求

$("#user_revise_btn").attr("edit-id",id);

var username=$(this).parent().parent().children("td").eq(2).text();

var sex=$(this).parent().parent().children("td").eq(3).text();

var city=$(this).parent().parent().children("td").eq(4).text();

var age=$(this).parent().parent().children("td").eq(5).text();

$("#username_revise_input").val(username);

$("#userReviseModal input[name=sex]").val([sex]);

$("#city_revise_input").val(city);

$("#age_revise_input").val(age);

$("#userReviseModal").modal({

backdrop: "static"

})

});

//2.为模态框中的修改按钮绑定事件，更新员工信息

$("#user_revise_btn").click(function () {

//2.验证通过后发送ajax请求保存更新的员工数据

//如果要直接发送PUT之类的请求

//在WEB.xml配置HttpPutFormContentFilter过滤器即可

//这里未使用如上所述方法

var id = $(this).attr("edit-id");

var username = $("#username_revise_input").val();

var sex = $("#userReviseModal input[name=sex]").val();

var city =$("#city_revise_input").val();

var age =$("#age_revise_input").val();

$.ajax({

url:"/user/updateUser",

type:"POST",

data:JSON.stringify({id:id,username:username,sex:sex,city:city,age:age}),

dataType:"json",

contentType:"application/json;charset=UTF-8",

success:function () {

//1.关闭modal框

$("#userReviseModal").modal('hide');

//2.来到当前页，显示刚才保存的数据

to_page(currentPage);

}

})

})

}

/**

* 4.删除用户

*/

function deleteUser() {

$(document).on("click",".delete_btn",function () {

//1.弹出确认删除对话框

var username=$(this).parents("tr").find("td:eq(2)").text();

var id=$(this).parents("tr").find("td:eq(1)").text();

if(confirm("确认删除【"+username+"】吗？")){

// alert(id);

//确认，发送ajax请求删除

$.ajax({

url:"/user/deleteUser/"+id,

type:"DELETE",

success:function (data) {

alert(data.msg);

to_page(currentPage);

}

})

}

})

}

});

妞妞脾气灰常大

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax实现表单增删改,bootstrap+Ajax+SSM(maven搭建)表单增删改查

前后端分离，前端利用ajax调用后端API接收json数据,进行表单的增删改查软件架构IDE：IDEA数据库：mysqljdk:1.8tomcat:9后端：springmvc，mybatis前端：bootstrap效果图：增删改查效果图项目结构：项目结构pom.xmlxsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。