Spring中JS处理表单数据方法解析

本文深入解析了JavaScript前端与Spring后端协同处理表单数据的核心实践，涵盖JSON格式（配合@RequestBody）、传统表单（配合@RequestParam/@ModelAttribute）、跨域CORS配置、CSRF防护及统一响应格式等关键场景，强调“格式一致”和“注解精准”是无缝对接的基石——无论你是刚上手前后端分离的新手，还是正被表单提交失败困扰的开发者，都能从中获得即学即用、避坑高效的完整解决方案。

在Spring框架中处理JavaScript提交的表单数据，关键在于前后端的数据格式匹配和正确使用Spring MVC或Spring Boot的注解。前端用JavaScript发送请求，后端通过控制器接收并解析数据。以下是具体实现方式。

1. 使用AJAX发送JSON数据到Spring控制器

现代Web应用通常使用JavaScript（如原生fetch或jQuery）发送JSON格式的表单数据。Spring控制器通过@RequestBody接收。

function submitForm() {
  const formData = {
    username: document.querySelector('[name="username"]').value,
    email: document.querySelector('[name="email"]').value
  };

  fetch('/api/user', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  }).then(response => {
    if (response.ok) {
      alert('提交成功');
    }
  });
}

@RestController
public class UserController {

  @PostMapping("/api/user")
  public ResponseEntity createUser(@RequestBody UserDto userDto) {
    System.out.println("用户名：" + userDto.getUsername());
    System.out.println("邮箱：" + userDto.getEmail());
    return ResponseEntity.ok("用户创建成功");
  }
}

注意：UserDto需有对应字段的getter/setter，Spring会自动反序列化JSON。

2. 处理x-www-form-urlencoded表单（传统方式）

如果JavaScript未发送JSON，而是模拟表单提交（如FormData），Spring可用@RequestParam或@ModelAttribute接收。

function submitForm() {
  const form = document.getElementById('userForm');
  const formData = new FormData(form);

  fetch('/api/user/form', {
    method: 'POST',
    body: formData // 自动设置为 multipart/form-data
  });
}

@PostMapping("/api/user/form")
public ResponseEntity handleForm(
    @RequestParam String username,
    @RequestParam String email) {
  System.out.println("用户名：" + username);
  return ResponseEntity.ok("表单接收成功");
}

也可绑定到对象：

public ResponseEntity handleForm(@ModelAttribute UserDto user) {
  // 自动映射同名字段
}

3. 跨域与CSRF注意事项

前后端分离时，常遇到跨域问题。可在Spring中启用CORS：

@Configuration
public class WebConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/api/**").allowedOrigins("*");
  }
}

若启用了Spring Security的CSRF保护，AJAX请求需携带token。可从页面获取token并添加到请求头：

headers: {
  'Content-Type': 'application/json',
  'X-CSRF-TOKEN': document.querySelector('[name=_csrf]').value
}

4. 错误处理与响应格式统一

建议返回标准化JSON响应，便于前端处理：

public class ApiResponse {
  private boolean success;
  private String message;

  // 构造函数、getter/setter
}

控制器返回：

return ResponseEntity.ok(new ApiResponse(true, "提交成功"));

前端根据success字段判断是否成功。

基本上就这些。关键是前后端数据格式一致，合理使用Spring注解，并注意安全和异常情况。不复杂但容易忽略细节。

今天关于《Spring中JS处理表单数据方法解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！