这里提供一个简单的示例，实现基于 Spring MVC 和
Ajax 的
表格查询功能，使用的前端框架是
layui 数据表格，
数据库使用的是 MySQL。
1. 在 pom.xml 文件中添加以下依赖：
```xml
<!-- Spring MVC -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</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.MappingJackson2JsonView" />
```
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(Http
ServletRequest 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 数据表格展示
数据。
971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
