Angular提交的表单在Spring Boot中显示为空
创始人
2024-10-29 18:00:42
0

在Angular中提交的表单数据在Spring Boot中显示为空的问题可能有多个原因。以下是一些可能的解决方法:

  1. 确保Angular中的表单数据正确地绑定到表单控件上,并在提交时正确地传递给后端。确保表单的ngSubmit事件处理程序正确地处理表单数据,并使用HttpClient将数据发送到后端。例如:

Angular组件:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-form',
  template: `
    
`, }) export class FormComponent { formData = { name: '' }; constructor(private http: HttpClient) {} submitForm() { this.http.post('/api/submit-form', this.formData).subscribe(response => { console.log(response); }); } }
  1. 在Spring Boot中,确保后端的Controller正确地接收并处理来自Angular的表单数据。使用@RequestBody注解将请求体映射到后端的Java对象中。例如:

Spring Boot Controller:

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

@RestController
public class FormController {

  @PostMapping("/api/submit-form")
  public void submitForm(@RequestBody FormData formData) {
    System.out.println(formData.getName());
    // 处理表单数据
  }
}

public class FormData {
  private String name;

  // 省略getter和setter方法
}
  1. 确保Angular和Spring Boot的跨域配置正确设置。在Spring Boot中,可以使用@CrossOrigin注解来允许来自Angular的跨域请求。在Angular中,可以使用HttpClient的withCredentials选项来处理跨域请求。例如:

Spring Boot Controller:

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

@RestController
public class FormController {

  @CrossOrigin(origins = "http://angular-app-url")
  @PostMapping("/api/submit-form")
  public void submitForm(@RequestBody FormData formData) {
    // 处理表单数据
  }
}

Angular组件:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-form',
  template: `
    
`, }) export class FormComponent { formData = { name: '' }; constructor(private http: HttpClient) {} submitForm() { this.http.post('/api/submit-form', this.formData, { withCredentials: true }).subscribe(response => { console.log(response); }); } }

以上是一些可能的解决方法,但具体解决方法可能因具体情况而异。您可以根据您的代码和需求进行调整和修改。

相关内容

热门资讯

透视脚本!德普之星有没有挂,熊... 透视脚本!德普之星有没有挂,熊猫辅助软件,普及教程(有挂辅助)准备好在熊猫辅助软件ia的高塔上攀登,...
透视攻略!wpk有脚本吗,麻友... 透视攻略!wpk有脚本吗,麻友圈安全版插件,安装教程(有挂技巧);小薇(透视辅助)致您一封信;亲爱麻...
透视计算!aapoker俱乐部... 透视计算!aapoker俱乐部靠谱吗,凑一桌游戏春天辅助,线上教程(有挂教程)关于凑一桌游戏春天辅助...
透视模拟器!智星德州菠萝插件官... 透视模拟器!智星德州菠萝插件官网,传送屋没激k辅助器下载,线上教程(有挂透视)是一款可以让一直输的玩...
透视辅助!wpk透视脚本链接,... 《透视辅助!wpk透视脚本链接,微乐小程序晃晃脚本,曝光教程(有挂神器)》 微乐小程序晃晃脚本软件透...
透视计算!德普之星透视辅助软件... 透视计算!德普之星透视辅助软件,凑一桌游戏春天辅助,安装教程(有挂软件)是一款可以让一直输的玩家,快...
透视实锤!hhpoker辅助软... 透视实锤!hhpoker辅助软件下载,约战竞技场辅助软件,辅助教程(有挂软件);原来确实真的有挂(需...
透视ai!wepoker透视脚... 透视ai!wepoker透视脚本免费,丽水都来大菠萝脚本辅助,可靠技巧(有挂透视);原来确实真的有挂...
透视美元局!hhpoker透视... 透视美元局!hhpoker透视方法,新超凡软甲辅助,切实教程(有挂神器);1.新超凡软甲辅助 ai辅...
透视苹果版!wepoker辅助... 自定义玖游卡五星辅助下载系统规律,只需要输入自己想要的开挂功能,一键便可以生成出微扑克专用辅助器,不...