阅读量:2
实现动态监测输入框变化并即时反馈的AJAX与Spring Boot示例
本文将介绍如何使用 AJAX 技术结合 Spring Boot 构建一个实时反馈用户输入的应用。我们将创建一个简单的输入框，当用户在输入框中键入文本时，应用将异步地向后端发送请求，后端处理请求并返回结果，前端则即时显示反馈信息。
前提条件
- 已安装 Java 和 Maven
- 熟悉基本的 HTML、CSS 和 JavaScript
- 对 Spring Boot 有基本了解
项目结构
项目将分为两部分：前端 HTML 和 JavaScript，以及用java完成的后端，所用框架 Spring Boot。
1. 前端 HTML（可合并） 和 JavaScript
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 请求触发，并且后端返回的反馈显示在页面上。
