快捷導(dǎo)航

ajax實時監(jiān)測與springboot的實例分析

更新時間：2024年07月21日 09:47:42 作者：羽墨link

本文將介紹如何使用 AJAX 技術(shù)結(jié)合 Spring Boot 構(gòu)建一個實時反饋用戶輸入的應(yīng)用,我們將創(chuàng)建一個簡單的輸入框,當用戶在輸入框中鍵入文本時,應(yīng)用將異步地向后端發(fā)送請求,感興趣的朋友跟隨小編一起看看吧

實現(xiàn)動態(tài)監(jiān)測輸入框變化并即時反饋的AJAX與Spring Boot示例

本文將介紹如何使用 AJAX 技術(shù)結(jié)合 Spring Boot 構(gòu)建一個實時反饋用戶輸入的應(yīng)用。我們將創(chuàng)建一個簡單的輸入框，當用戶在輸入框中鍵入文本時，應(yīng)用將異步地向后端發(fā)送請求，后端處理請求并返回結(jié)果，前端則即時顯示反饋信息。

前提條件

已安裝 Java 和 Maven
熟悉基本的 HTML、CSS 和 JavaScript
對 Spring Boot 有基本了解

項目結(jié)構(gòu)

項目將分為兩部分：前端 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>

創(chuàng)建 Controller
創(chuàng)建一個 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) {
        // 業(yè)務(wù)邏輯處理
        String feedback = "No feedback available.";
        if ("hello".equals(query)) {
            feedback = "Hello there!";
        }
        return ResponseEntity.ok(feedback);
    }
}