这里提供一个简单的示例，实现基于
Spring MVC 和 Ajax 的表格查询功能，使用的前端框架是 layui 数据表格，数据库使用的是 MySQL。
1. 在 pom.xml 文件中添加以下依赖：
```xml
<!
-- Spring MVC -->
<dependency>
<groupId>org.
springframework</groupId>
<artifactId>
spring-web
mvc</artifactId>
<version>${
spring.version}</version>
</dependency>
<!
-- Jackson
JSON -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson
-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
<!
-- MySQL JDBC
-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql
-connector
-java</artifactId>
<version>${mysql.version}</version>
</dependency>
```
2. 在
Spring 配置文件中添加以下配置：
```xml
<!
-- 数据源配置
-->
<bean id="dataSource" class="org.apache.commons.dbcp2.BasicDataSource" destroy
-method="close">
<property name="driverClassName" value="com.mysql.jdbc.Driver" />
<property name="url" value="jdbc:mysql://localhost:3306/test" />
<property name="username" value="root" />
<property name="password" value="password" />
</bean>
<!
-- MyBatis 配置
-->
<bean id="sqlSessionFactory" class="org.
mybatis.
spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="typeAliasesPackage" value="com.example.model" />
<property name="mapperLocations" value="classpath*:com/example/mapper/*.xml" />
<property name="configLocation" value="classpath:
mybatis-config.xml" />
</bean>
<!
-- MyBatis Mapper 扫描
-->
<bean class="org.
mybatis.
spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.example.mapper" />
</bean>
<!
-- 开启
Spring MVC 注解支持
-->
<annotation
-driven/>
<!
-- 静态资源处理
-->
<
mvc:resources mapping="/static/**" location="/static/" />
<!
-- 视图解析器
-->
<bean id="viewResolver" class="org.
springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB
-INF/views/" />
<property name="suffix" value=".jsp" />
</bean>
```
3. 在
Spring MVC 配置文件中添加以下配置：
```xml
<!
-- 开启注解驱动
-->
<
mvc:annotation
-driven />
<!
-- 配置处理器映射器
-->
<bean class="org.
springframework.web.servlet.handler.BeanNameUrlHandlerMapping" />
<!
-- 配置控制器
-->
<bean name="/ajaxTable" class="com.example.controller.AjaxTableController" />
<!
-- 配置 AJAX
返回值处理器
-->
<bean class="org.
springframework.web.servlet.view.
json.MappingJackson2
JsonView" />
```
4. 创建一个实体类 User，对应 MySQL 数据库中的 user 表：
```java
public class User {
private
Long id;
private String username;
private String email;
private String phone;
// getter 和 setter 方法省略
}
```
5. 创建一个 DAO 接口 UserMapper，使用
MyBatis 进行数据库操作：
```java
public interface UserMapper {
List<User> selectByCondition
(Map<String, Object> condition
);
}
```
6. 创建一个控制器 AjaxTableController，实现搜索功能：
```java
@Controller
public class AjaxTableController {
@Autowired
private UserMapper userMapper;
@RequestMapping
("/ajaxTable"
)
public ModelAndView ajaxTable
() {
return new ModelAndView
("ajaxTable"
);
}
@RequestMapping
("/ajaxTable/search"
)
@ResponseBody
public Map<String, Object> search
(HttpServletRequest request
) {
Map<String, Object> result = new HashMap<>
();
String username = request.getParameter
("username"
);
String email = request.getParameter
("email"
);
String phone = request.getParameter
("phone"
);
Map<String, Object> condition = new HashMap<>
();
condition.put
("username", username
);
condition.put
("email", email
);
condition.put
("phone", phone
);
List<User> userList = userMapper.selectByCondition
(condition
);
result.put
("code", 0
);
result.put
("msg", ""
);
result.put
("count", userList.size
());
result.put
("data", userList
);
return result;
}
}
```
7. 创建一个 JSP 页面 ajaxTable.jsp，使用 layui 数据表格展示数据：
```html
<!doctype html>
<html>
<head>
<meta charset="UTF
-8">
<title>Ajax Table</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui
-container">
<div class="layui
-row layui
-col
-space15">
<div class="layui
-card">
<div class="layui
-card
-body">
<form class="layui
-form layui
-form
-pane" lay
-filter="table
-search">
<div class="layui
-form
-item layui
-inline">
<label class="layui
-form
-label">Username</label>
<div class="layui
-input
-inline">
<input type="text" name="username" class="layui
-input" autocomplete="off">
</div>
</div>
<div class="layui
-form
-item layui
-inline">
<label class="layui
-form
-label">Email</label>
<div class="layui
-input
-inline">
<input type="text" name="email" class="layui
-input" autocomplete="off">
</div>
</div>
<div class="layui
-form
-item layui
-inline">
<label class="layui
-form
-label">Phone</label>
<div class="layui
-input
-inline">
<input type="text" name="phone" class="layui
-input" autocomplete="off">
</div>
</div>
<div class="layui
-form
-item">
<div class="layui
-input
-inline">
<button class="layui
-btn" type="button" lay
-submit lay
-filter="table
-search
-btn">Search</button>
<button class="layui
-btn layui
-btn
-primary" type="reset">Reset</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui
-card">
<div class="layui
-card
-body">
<table id="userTable" lay
-filter="userTable"></table>
</div>
</div>
</div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
layui.use
(['table', 'form'], function
() {
var table = layui.table;
var form = layui.form;
table.render
({
elem: '#userTable',
url: '/ajaxTable/search',
method: 'post',
page: true,
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: 'Username', width:
120},
{field: 'email', title: 'Email', width: 200},
{field: 'phone', title: 'Phone', width:
120}
]]
}
);
form.on
('submit
(table
-search
-btn
)', function
(data
) {
table.reload
('userTable', {
where: data.field
}
);
return false;
}
);
}
);
</script>
</body>
</html>
```
通过访问 `/ajaxTable` 页面即可看到一个带搜索功能的数据表格。用户输入搜索条件后，点击搜索按钮即可实现异步请求，后台根据条件查询数据库，将查询结果
返回给前端，前端使用 layui 数据表格展示数据。
扫一扫
3153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
