如何将表单数据提交至本地MySQL数据库？

一、你的思路是正确的 #

后端通过REST JPA接口处理MySQL数据持久化，前端将表单数据提交到该接口的方向完全没问题，下面分两种实现方式详细说明：

二、原生HTML表单提交（无需JavaScript） #

你当前的写法基本可行，但需要修正几个细节：

1. 修复表单语法错误 #

代码里的标签 <label for=pName"> 缺少开头的双引号，正确写法是：

<label for="pName">Product name:</label>

2. 关键注意事项 #

• 内容类型匹配：原生表单默认以 application/x-www-form-urlencoded 格式发送数据，后端接口要对应接收方式：
  • 若用Spring Boot，可通过 @RequestParam 逐个接收参数：

    @PostMapping("/api/products/addProduct")
    public ResponseEntity<String> addProduct(
        @RequestParam String name,
        @RequestParam double price,
        @RequestParam int weight
    ) {
        productRepository.save(new Product(name, price, weight));
        return ResponseEntity.ok("Product added");
    }
    

  • 或者用 @ModelAttribute 直接绑定到实体类：

    @PostMapping("/api/products/addProduct")
    public ResponseEntity<Product> addProduct(@ModelAttribute Product product) {
        Product saved = productRepository.save(product);
        return ResponseEntity.ok(saved);
    }
    

• 页面跳转问题：原生表单提交后会刷新页面，跳转到接口返回的内容页；如果需要留在当前页并显示提交结果，就得用JavaScript异步提交。
• 跨域问题：如果前端页面运行端口和后端（8080）不同（比如前端在 localhost:5500），后端需要配置CORS允许跨域请求。

三、JavaScript异步提交（无刷新体验） #

这种方式更适合现代Web应用，能在不跳转页面的情况下提交数据并给出反馈：

1. 修改表单（添加id方便获取） #

<form id="productForm">
    <table class="formTable">
        <tr>
            <td><label for="pName">Product name:</label></td>
            <td><input type="text" id="pName" name="name" required></td>
        </tr>
        <tr>
            <td><label for="pPrice">Product price:</label></td>
            <td><input type="number" id="pPrice" name="price" required></td>
        </tr>
        <tr>
            <td><label for="pWeight">Product weight (gram):</label></td>
            <td><input type="number" id="pWeight" name="weight" required></td>
        </tr>
    </table>
    <input type="submit" value="Add Product">
</form>
<!-- 用于显示提交结果 -->
<div id="result"></div>

2. 编写JavaScript代码 #

用 fetch API发送请求，阻止表单默认提交行为：

const form = document.getElementById('productForm');
const resultDiv = document.getElementById('result');

form.addEventListener('submit', async (e) => {
    e.preventDefault(); // 阻止默认表单提交

    // 获取表单数据并转为JSON格式
    const formData = new FormData(form);
    const productData = Object.fromEntries(formData);

    try {
        const response = await fetch('http://localhost:8080/api/products/addProduct', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json', // 对应后端@RequestBody接收
            },
            body: JSON.stringify(productData)
        });

        if (!response.ok) {
            throw new Error('提交失败');
        }

        const data = await response.json();
        resultDiv.textContent = `产品添加成功：${data.name}`;
        form.reset(); // 重置表单
    } catch (error) {
        resultDiv.textContent = `错误：${error.message}`;
    }
});

3. 后端对应接收方式 #

如果用上述JSON格式提交，后端需要用 @RequestBody 接收实体类：

@PostMapping("/api/products/addProduct")
public ResponseEntity<Product> addProduct(@RequestBody Product product) {
    Product savedProduct = productRepository.save(product);
    return ResponseEntity.ok(savedProduct);
}

四、两种方式的选择 #

• 原生表单提交：适合简单场景，无需额外JS，快速实现，但用户体验较差（页面跳转）。
• JS异步提交：适合需要无刷新反馈、后续交互的场景，更符合现代Web应用需求。

内容的提问来源于stack exchange，提问作者August Høg Dedenroth