现有jQuery+Spring MVC项目，如何用ReactJS建表单发请求到控制器？

没问题！我来一步步帮你搞定用React实现表单提交到Spring MVC控制器的需求，其实思路和你熟悉的jQuery差不多，只是React的状态管理和提交方式有一点点不同，我给你详细拆解下：

1. 准备工作：安装依赖 #

首先确保你的React项目里已经安装了react和axios（axios比原生fetch更贴近你熟悉的jQuery AJAX用法，上手更顺畅）：

npm install react axios

2. 编写React表单组件（函数组件+Hooks） #

我们用React的useState来管理表单数据，避免直接操作DOM，这是React的核心思路之一：

import React, { useState } from 'react';
import axios from 'axios';

const UserForm = () => {
  // 初始化表单状态，字段名要和Spring实体类的属性对应
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  // 处理输入框内容变化，同步更新表单状态
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  // 处理表单提交逻辑
  const handleSubmit = async (e) => {
    e.preventDefault(); // 阻止浏览器默认的表单跳转行为
    try {
      // 发送POST请求到Spring的/saveuser接口
      const response = await axios.post('/saveuser', formData);
      // 请求成功后的操作：提示用户、重置表单等
      alert('用户保存成功！');
      console.log('控制器响应:', response.data);
      setFormData({ username: '', email: '', password: '' });
    } catch (error) {
      // 请求失败的错误处理
      console.error('保存失败:', error);
      alert('保存失败，请检查输入或重试');
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '20px', maxWidth: '400px' }}>
      <div style={{ marginBottom: '15px' }}>
        <label>用户名:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleInputChange}
          required
          style={{ marginLeft: '10px', padding: '5px' }}
        />
      </div>
      <div style={{ marginBottom: '15px' }}>
        <label>邮箱:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          required
          style={{ marginLeft: '10px', padding: '5px' }}
        />
      </div>
      <div style={{ marginBottom: '15px' }}>
        <label>密码:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
          required
          style={{ marginLeft: '10px', padding: '5px' }}
        />
      </div>
      <button type="submit" style={{ padding: '8px 16px' }}>保存用户</button>
    </form>
  );
};

export default UserForm;

3. Spring MVC控制器的适配调整 #

你的控制器需要确保能接收JSON格式的请求体，所以要加上@RequestBody注解，同时实体类的字段要和React表单的字段完全对应：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
// 如果React和Spring不在同一端口运行，需要添加跨域允许（比如React跑在3000端口）
@CrossOrigin(origins = "http://localhost:3000")
public class UserController {

    @PostMapping("/saveuser")
    public String saveUser(@RequestBody User user) {
        // 这里写你的业务逻辑：比如存入数据库
        System.out.println("收到用户数据: " + user.getUsername() + " | " + user.getEmail());
        // 返回JSON格式的响应，Spring会自动序列化
        return "{\"status\":\"success\",\"message\":\"用户已成功保存\"}";
    }
}

// 对应的User实体类，必须有无参构造器和getter/setter
class User {
    private String username;
    private String email;
    private String password;

    public User() {}

    // getter和setter方法
    public String getUsername() { return username; }
    public void setUsername(String username) { this.username = username; }
    public String getEmail() { return email; }
    public void setEmail(String email) { this.email = email; }
    public String getPassword() { return password; }
    public void setPassword(String password) { this.password = password; }
}

核心逻辑对比（和jQuery的区别） #

其实本质思路是一致的：

• jQuery：监听表单提交事件 → 直接从DOM获取输入值 → 用$.ajax()发请求
• React：用状态管理表单输入 → 提交时读取状态数据 → 用axios.post()发请求

最大的不同是React通过状态驱动视图，不需要手动操作DOM获取值，代码的可维护性和复用性更强。

内容的提问来源于stack exchange，提问作者Ahmad