前端JavaScript通过Form Data与Request Payload进行后端交互的区别与应用

{ “user”: { “name”: “John Doe”, “age”: 30, “email”: “john@example.com” } }

// 对于application/x-www-form-urlencoded
//使用@RequestParam接收，可以用post或者get请求
 @PostMapping("/login") 
 public ResponseEntity<?> login(@RequestParam String username, @RequestParam String password) { 
     // 处理逻辑
  }  
      
// 对于multipart/form-data 
//使用@RequestParam接收
@PostMapping("/upload") 
public ResponseEntity<?> upload(@RequestParam String name, @RequestParam MultipartFile file) {    
       // 处理逻辑
} 

//使用@RequestBody接收
@PostMapping("/user") public ResponseEntity<?> createUser(@RequestBody UserDTO userDTO) {     
// 处理逻辑 
} 

<form action="/submit" method="post" enctype="application/x-www-form-urlencoded"> 
    <input type="text" name="username" />
    <input type="password" name="password" /> 
    <button type="submit">提交</button> 
</form> 

const formData = new FormData(); 
formData.append('name', 'John Doe'); 
formData.append('avatar', fileInput.files[0]);
  fetch('/upload', {     method: 'POST',     body: formData     // 注意：无需设置Content-Type，浏览器会自动处理 
  }); 

// 使用jQuery 
$.ajax({
	url: '/submit',     
	type: 'POST',     
	data: $('#myForm').serialize(),     
	contentType: 'application/x-www-form-urlencoded' }); 

const userData = {     
	name: 'John Doe',     
	age: 30,    
	profile: {bio: 'Software Developer',skills: ['JavaScript', 'Python']     
	} }; 
 fetch('/api/users', {     
 	method: 'POST',     
 	headers: {'Content-Type': 'application/json'},     
	 body: JSON.stringify(userData) }); 

// 发送嵌套的配置对象 
const config = {     
	settings: {         
		theme: 'dark',         
		notifications: {email: true,push: false }
		},     
	preferences: ['autosave', 'spellcheck'] }; 

const formData = new FormData(); 
formData.append('metadata', JSON.stringify(complexData));
formData.append('file', fileObject);