ajax实时监测与springboot的实例分析

实现动态监测输入框变化并即时反馈的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 请求触发，并且后端返回的反馈显示在页面上。