实现动态监测输入框变化并即时反馈的AJAX与Spring Boot示例
本文将介绍如何使用 AJAX 技术结合 Spring Boot 构建一个实时反馈用户输入的应用。我们将创建一个简单的输入框，当用户在输入框中键入文本时，应用将异步地向后端发送请求，后端处理请求并返回结果，前端则即时显示反馈信息。
前提条件
- 已安装 Java 和 Maven
- 熟悉基本的 HTML、CSS 和 JavaScript
- 对 Spring Boot 有基本了解
项目结构
项目将分为两部分：前端 HTML 和 JavaScript，以及用java完成的后端，所用框架 Spring Boot。
1. 前端 HTML（可合并） 和 JavaScript
HTML 文件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Input Monitoring with Spring Boot</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Live Input Feedback</h2>
<input type="text" id="searchInput" placeholder="Type something...">
<div id="feedback"></div>
<script>
$(document).ready(function() {
$('#searchInput').on('input', function() {
var query = $(this).val();
$.ajax({
url: '/api/check-input',
type: 'GET',
data: { query: query },
success: function(response) {
$('#feedback').html(response);
},
error: function(error) {
console.error('An error occurred:', error);
}
});
});
});
</script>
</body>
</html>2. 后端 Spring Boot
添加依赖
在 pom.xml 文件中添加 Spring Boot 的 Web 依赖：
Xml
<dependencies>
<!-- Spring Boot Web Starter -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- JSON 处理 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
</dependency>
</dependencies>创建 Controller
创建一个 REST 控制器来处理 AJAX 请求：
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class InputController {
@GetMapping("/api/check-input")
public ResponseEntity<String> checkInput(@RequestParam("query") String query) {
// 业务逻辑处理
String feedback = "No feedback available.";
if ("hello".equals(query)) {
feedback = "Hello there!";
}
return ResponseEntity.ok(feedback);
}
}运行应用
确保你的 Spring Boot 应用正在运行，然后在浏览器中打开你的 HTML 页面。当你在输入框中输入文字时，应该能看到 AJAX 请求触发，并且后端返回的反馈显示在页面上。