如何把js获取到的值赋值给java代码

原创

mob64ca12d6c78e 2024-09-05 03:58:59 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d6c78e的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何把JavaScript获取到的值赋值给Java代码

在现代Web应用程序中，前端JavaScript通常用于获取用户输入或操作数据，而后端Java负责业务逻辑和数据处理。将JavaScript获取到的值传递给Java后端是一项常见的需求。本文将通过一个具体的例子来解决这个问题，包括饼状图展示数据的组成。

问题描述

假设我们需要开发一个Web应用程序，用户可以选择不同的水果来计算其消费比例，并将选择的数据传递给Java后端进行统计。我们将展示一个饼状图，来直观地呈现水果消费的分布。

前端代码示例

以下是使用HTML和JavaScript实现的前端代码。在这个示例中，我们将用户选择的水果和数量收集起来，并通过AJAX将数据发送到Java后端。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水果消费统计</title>
    <script src="
</head>
<body>
    选择水果
    <form id="fruitForm">
        <label for="fruit">选择水果:</label>
        <select id="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="橘子">橘子</option>
            <option value="葡萄">葡萄</option>
        </select>
        <label for="quantity">数量:</label>
        <input type="number" id="quantity" min="1" value="1">
        <button type="submit">提交</button>
    </form>

    <div id="chartContainer"></div>

    <script>
        $(document).ready(function() {
            $('#fruitForm').on('submit', function(event) {
                event.preventDefault();

                const fruit = $('#fruit').val();
                const quantity = $('#quantity').val();

                $.ajax({
                    url: '/submitFruit',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ fruit: fruit, quantity: quantity }),
                    success: function(response) {
                        console.log('数据成功提交:', response);
                        // 调用方法来渲染饼状图
                        renderChart(response.data);
                    },
                    error: function(error) {
                        console.error('提交失败:', error);
                    }
                });
            });
        });

        function renderChart(data) {
            // 使用mermaid展示饼状图
            document.getElementById('chartContainer').innerHTML = `
                ```mermaid
                pie
                    title 水果消费分布
                    "${data.apple}苹果": ${data.apple}
                    "${data.banana}香蕉": ${data.banana}
                    "${data.orange}橘子": ${data.orange}
                    "${data.grape}葡萄": ${data.grape}
                ```
            `;
            // 重新渲染mermaid图形
            mermaid.initialize({ startOnLoad: true });
        }
    </script>
</body>
</html>

后端代码示例

接下来，我们需要编写Java后端代码，以接收来自前端的数据。使用Spring Boot可以简化这一过程。

import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@RestController
public class FruitController {

    private Map<String, Integer> fruitData = new HashMap<>();

    @PostMapping("/submitFruit")
    public Map<String, Integer> submitFruit(@RequestBody Map<String, Object> payload) {
        String fruit = (String) payload.get("fruit");
        Integer quantity = (Integer) payload.get("quantity");
        
        fruitData.put(fruit, fruitData.getOrDefault(fruit, 0) + quantity);
        
        return fruitData;
    }
}