最终页面效果:
案例目录结构
数据库表
表的设计:
Controller方法返回值类型Object
- (1)Controller方法返回类型可以有几种?
ModelAndView
void
String
Object
- (2)@ResponseBody
调jackson库将Object转成json字符串返回
如果没有依赖jackson库则,抛出异常
HttpMessageNotWritableException: No converter found for return value of type: class java.util.ArrayList
- (3)依赖配置jackson库
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.3</version>
</dependency>
Controller方法返回Result
-
(1)返回结果Result
private int code;//编码 private String msg;//提示信息 private Object data; //数据
-
(2)将数据放到Result对象中
public class Result {
private int code;//编码 404 200
private String msg;//提示信息
private Object data; //数据
public static Result init(int code, String msg, Object data){
Result result =new Result(code,msg,data);
return result;
}
private Result() {
}
private Result(int code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
Controller方法返回Result
@Controller
@RequestMapping("/deptv2") //写在类上面指定当前模块路径
public class DepartmentV2Controller {
@Autowired
private IDepartmentService departmentService;//controller调用 service层
/*@RequestMapping(path="/xx")
public 返回值类型 方法名(参数){ //页面提交过来的请求参数
//..
返回值类型决定返回给浏览器的内容
}
*/
@RequestMapping(path="/listUI",method = RequestMethod.GET)
public String listUI(){
return "list_depts";
}
//地址上带UI表示打开页面,不带的表示返回数据
@RequestMapping(path="/list",method = RequestMethod.GET)
public @ResponseBody //将list调jackson转成json字符串
Object list(){
//业务逻辑 调用查找所有的部门的方法
List<Department> list = departmentService.findAllDepartments();
return Result.init(200,"",list);//返回对象需要被转成json字符串
}
}
Ajax回顾
- (1)ajax是什么
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML) - (2)ajax有什么特点
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。即可以在不重新加载整个网页的情况下,对网页的某部分进行更新
上一个版本 使用重定向或者请求转发的,叫整体刷新
今天 使用ajax不需要重定向或者请求转发
- (3)具体编程内容
js 发送请求
js 接收结果
js 更新页面
Jquery实现Ajax
- (1)导入jquery库
将库文件复到项目中
在页面中引入库
<%
pageContext.setAttribute("path",request.getContextPath());
%>
<head>
<title>Title</title>
<!-- 引入-->
<script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
</head>
- (2)代码编写
js 发送请求 $.get $.post serialize()
js 接收结果 function(data){…}
js 更新页面 $(id值) html()
list.jsp
function deleteById(did) {
$.get('${path}/deptv2/delete?did='+did,function (result) {
console.info(result)
if(200==result.code){
alert(result.msg)
refreshTable()//调用列表更新
}else{
alert(result.msg)
}
},'json')
}
<a href="javascript:deleteById('+dept.did+')">删除</a>
- 默认情况下点击超链接 是跳转页面-整体刷新
- Ajax是局部刷新,点击链接调用函数,函数内部发起请求,处理返回结果,更新页面
属性display:none
- Ajax不切换页面,所有内容在一个页面,只需要通过style的属性display,将值设置为none不可见,不占高度。
- 如果需要显示出来,设置display的值为block
案例完整详细代码:
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.lbl</groupId>
<artifactId>ssm05_ajax</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>ssm05_ajax Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<spring.version>5.2.9.RELEASE</spring.version>
<slf4j.version>1.6.6</slf4j.version>
<log4j.version>1.2.12</log4j.version>
<mysql.version>5.1.6</mysql.version>
<mybatis.version>3.4.5</mybatis.version>
</properties>
<dependencies>
<!-- spring -->
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>1.6.8</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- log start -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>${log4j.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${slf4j.version}</version>
</dependency>
<!-- log end -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mybatis.version}</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.0</version>
</dependency>
<dependency>
<groupId>c3p0</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.1.2</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.3</version>
</dependency>
</dependencies>
</project>
##applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
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/aop https://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.lbl">
<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<!-- 四大信息-->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="jdbcUrl" value="jdbc:mysql://47.115.79.211:3308/crud?useUnicode=true&characterEncoding=utf8"></property>
<property name="driverClass" value="com.mysql.jdbc.Driver"></property>
<property name="user" value="root"></property>
<property name="password" value="admin123"></property>
</bean>
<!-- session工厂-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<!-- com.wzx.domain.Person person-->
<property name="typeAliasesPackage" value="com.lbl.domain"/>
</bean>
<!-- IPersonDao.xml IPersonDao.java-->
<bean id="mapperScanner" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.lbl.dao"/>
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
</bean>
<!--配置Spring框架声明式事务管理-->
<!--配置事务管理器-->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
</bean>
<tx:advice id="txAdvice" transaction-manager="transactionManager">
<tx:attributes>
<tx:method name="find*" read-only="true"/>
<tx:method name="*" isolation="DEFAULT"/>
</tx:attributes>
</tx:advice>
<!--配置AOP增强-->
<aop:config>
<aop:pointcut id="service" expression="execution(* com.lbl.service.impl.*ServiceImpl.*(..))"/>
<aop:advisor advice-ref="txAdvice" pointcut-ref="service"/>
</aop:config>
</beans>
log4j.properties
# Set root category priority to INFO and its only appender to CONSOLE.
#log4j.rootCategory=INFO, CONSOLE debug info warn error fatal
log4j.rootCategory=debug, CONSOLE, LOGFILE
# Set the enterprise logger category to FATAL and its only appender to CONSOLE.
log4j.logger.org.apache.axis.enterprise=FATAL, CONSOLE
# CONSOLE is set to be a ConsoleAppender using a PatternLayout.
log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n
# LOGFILE is set to be a File appender using a PatternLayout.
log4j.appender.LOGFILE=org.apache.log4j.FileAppender
log4j.appender.LOGFILE.File=F:/ssmTest/log4j/ssm5_ajax.log
log4j.appender.LOGFILE.Append=true
log4j.appender.LOGFILE.layout=org.apache.log4j.PatternLayout
log4j.appender.LOGFILE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n
springmvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
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.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--只扫@Controller注解-->
<context:component-scan base-package="com.lbl">
<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
<!--过滤静态资源 .js .css png-->
<mvc:resources location="/css/" mapping="/css/**" />
<mvc:resources location="/images/" mapping="/images/**" />
<mvc:resources location="/js/" mapping="/js/**" />
<mvc:annotation-driven></mvc:annotation-driven>
</beans>
Department
/**
* Created by 李柏霖
* 2020/10/18 20:33
*/
package com.lbl.domain;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department {
private Integer did;
private String dname;
public Department(String dname) {
this.dname = dname;
}
}
Employee
/**
* Created by 李柏霖
* 2020/10/18 20:33
*/
package com.lbl.domain;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Employee {
private Integer eid;
private String ename;
private Integer gander;
private Integer did;
public Employee(String ename, Integer gander, Integer did) {
this.ename = ename;
this.gander = gander;
this.did = did;
}
}
IDepartmentService
/**
* Created by 李柏霖
* 2020/10/18 20:34
*/
package com.lbl.service;
import com.lbl.domain.Department;
import java.util.List;
public interface IDepartmentService {
List<Department> findAll();
Department findById(Integer did);
void save(Department department);
void saveDepartments(List<Department> departments);
void deleteById(Integer did);
void update(Department department);
}
IEmployeeService
/**
* Created by 李柏霖
* 2020/10/18 20:34
*/
package com.lbl.service;
import com.lbl.domain.Employee;
import java.util.List;
public interface IEmployeeService {
List<Employee> findAll();
Employee findById(Integer eid);
void save(Employee employee);
void savePersons(List<Employee> employees);
void deleteById(Integer eid);
void update(Employee employee);
}
DepartmentServiceImpl
/**
* Created by 李柏霖
* 2020/10/18 20:35
*/
package com.lbl.service.Impl;
import com.lbl.dao.IDepartmentDao;
import com.lbl.domain.Department;
import com.lbl.service.IDepartmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class DepartmentServiceImpl implements IDepartmentService {
@Autowired
IDepartmentDao departmentDao;
@Override
public List<Department> findAll() {
return departmentDao.findAll();
}
@Override
public void save(Department department) {
departmentDao.save(department);
}
@Override
public void saveDepartments(List<Department> departments) {
for (int i = 0; i <departments.size() ; i++) {
departmentDao.save(departments.get(i));
}
}
@Override
public void deleteById(Integer did) {
departmentDao.deleteById(did);
}
@Override
public Department findById(Integer did) {
return departmentDao.findById(did);
}
@Override
public void update(Department department) {
departmentDao.update(department);
}
}
EmployeeServiceImpl
/**
* Created by 李柏霖
* 2020/10/18 20:35
*/
package com.lbl.service.Impl;
import com.lbl.dao.IEmployeeDao;
import com.lbl.domain.Employee;
import com.lbl.service.IEmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class EmployeeServiceImpl implements IEmployeeService {
@Autowired
IEmployeeDao employeeDao;
@Override
public List<Employee> findAll() {
return employeeDao.findAll();
}
@Override
public Employee findById(Integer eid) {
return employeeDao.findById(eid);
}
@Override
public void save(Employee employee) {
employeeDao.save(employee);
}
@Override
public void savePersons(List<Employee> employees) {
for (int i = 0; i <employees.size() ; i++) {
employeeDao.save(employees.get(i));
}
}
@Override
public void deleteById(Integer eid) {
employeeDao.deleteById(eid);
}
@Override
public void update(Employee employee) {
employeeDao.update(employee);
}
}
IDepartmentDao
/**
* Created by 李柏霖
* 2020/10/18 20:33
*/
package com.lbl.dao;
import com.lbl.domain.Department;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface IDepartmentDao {
List<Department> findAll();
Department findById(Integer did);
void save(Department department);
void deleteById(Integer did);
void update(Department department);
}
IEmployeeDao
/**
* Created by 李柏霖
* 2020/10/18 20:33
*/
package com.lbl.dao;
import com.lbl.domain.Employee;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface IEmployeeDao {
List<Employee> findAll();
Employee findById(Integer eid);
void save(Employee employee);
void deleteById(Integer eid);
void update(Employee employee);
}
IDepartment.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lbl.dao.IDepartmentDao">
<select id="findAll" resultType="department">
select * from department;
</select>
<select id="findById" parameterType="int" resultType="department">
select * from department where did=#{did};
</select>
<insert id="save" parameterType="department">
insert into department values(null,#{dname})
</insert>
<delete id="deleteById" parameterType="int">
delete from department where did = #{did}
</delete>
<update id="update" parameterType="department">
update department set dname=#{dname} WHERE did=#{did}
</update>
</mapper>
IEmployeeDao.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lbl.dao.IEmployeeDao">
<select id="findAll" resultType="employee">
select * from employee;
</select>
<select id="findById" parameterType="int" resultType="employee">
select * from employee where eid=#{eid};
</select>
<insert id="save" parameterType="employee">
insert into employee values(null,#{ename},#{gander},#{did})
</insert>
<delete id="deleteById" parameterType="int">
delete from employee where eid=#{cid}
</delete>
<update id="update" parameterType="employee">
update employee
<set>
<if test="ename!=null">ename=#{ename},</if>
<if test="gander!=null">gander=#{gander},</if>
<if test="did!=null">did=#{did},</if>
</set>
where eid=#{eid}
</update>
</mapper>
Result
/**
* Created by 李柏霖
* 2020/10/19 17:37
*/
package com.lbl.VO;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
private int code;//编码 404 200
private String msg;//提示信息
private Object data; //数据
public static Result init(int code,String msg,Object data){
Result result = new Result(code, msg, data);
return result;
}
}
list.jsp
<%--
Created by IntelliJ IDEA.
User: Carlos
Date: 2020/10/18
Time: 20:56
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
pageContext.setAttribute("path", request.getContextPath());
%>
<script type="application/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
<html>
<head>
<title>Title</title>
</head>
<script type="application/javascript">
function refresh() {
$("#table").html("");
var li = ' <tr>\n' +
' <th>编号</th>\n' +
' <th>姓名</th>\n' +
' <th>性别</th>\n' +
' <th>部门ID</th>\n'+
' <th>操作1</th>\n' +
' <th>操作2</th>\n' +
' </tr>';
$.get("${path}/employee/list", function (data) {
var employeeList = data.data;
for (var i = 0; i < employeeList.length; i++) {
var employee = employeeList[i];
li += '<tr>\n' +
'<td>' + employee.eid + '</td>\n' +
'<td>' + employee.ename + '</td>\n' +
'<td>' + employee.gander + '</td>\n' +
'<td>' + employee.did + '</td>\n' +
'<td><a href="javascript:deleteById(${employee.eid})">删除</a></td>\n' +
'<td><a href="javascript:updateUI(${employee.eid})">修改</a></td>\n' +
'</tr>'
}
$("#table").html(li);
}, 'json')
}
function deleteById(eid) {
$.get("${path}/employee/delete?eid=" + eid, function (data) {
// console.log(data)
if (200 == data.code) {
alert(data.msg)
refresh()
} else {
alert(data.msg)
refresh()
}
}, 'json')
}
function updateUI(eid) {
$.get("${path}/employee/updateUI?eid=" + eid, function (data) {
console.log(data)
if (200 == data.code) {
$("#update_form").css("display", "block")
$("#table").css("display", "none")
var employee = data.data
$("#eid").val(employee.eid)
$("#ename").val(employee.ename)
$("#gander").val(employee.gander)
$("#did").val(employee.did)
}
}, 'json')
}
function updateById() {
var employee = $("#update_form").serialize();
$.get("${path}/employee/updateById", employee, function (data) {
console.log(data)
$("#update_form").css("display", "none")
$("#table").css("display", "block")
refresh()
}, 'json')
}
function addUI() {
$("#add_form").css("display", "block")
$("#table").css("display", "none")
}
function add() {
var employee = $("#add_form").serialize();
$.get("${path}/employee/add", employee, function (data) {
console.log(data)
$("#update_form").css("display", "none")
$("#table").css("display", "block")
refresh()
}, 'json')
}
</script>
<body>
<a href="javascript:addUI()">添加</a>
<table border="1px" width="100%" id="table">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>部门ID</th>
<th>操作1</th>
<th>操作2</th>
</tr>
<c:forEach items="${employeeList}" var="employee">
<tr>
<td>${employee.eid}</td>
<td>${employee.ename}</td>
<td>${employee.gander}</td>
<td>${employee.did}</td>
<td><a href="javascript:deleteById(${employee.eid})">删除</a></td>
<td><a href="javascript:updateUI(${employee.eid})">修改</a></td>
</tr>
</c:forEach>
</table>
<form id="update_form" style="display: none">
<h1>修改页面</h1>
编号:<input type="text" name="eid" id="eid">
姓名:<input type="text" name="ename" id="ename">
性别:<input type="text" name="gander" id="gander">
部门ID:<input type="text" name="did" id="did">
<input id="btn_update" οnclick="updateById()" type="button" value="保存修改"/><br/>
</form>
<form id="add_form" style="display: none">
<h1>新增页面</h1>
姓名:<input type="text" name="ename" >
性别:<input type="text" name="gander" >
部门ID:<input type="text" name="did">
<input id="btn_add" οnclick="add()" type="button" value="新增"/><br/>
</form>
</body>
</html>