Question

我的表格如下

<form #demoForm = "ngForm" (ngSubmit) = "onClickSubmit(demoForm.value)" >
        <input type = "text" name ="fruit" id="add" placeholder = "Enter fruit name" ngModel>
        <input type = "submit" value = "add">
</form>

及以下方法在表单提交时被调用

onClickSubmit(data) {
  alert("Entered Fruitname : " + data.fruit);
  console.log(data);
  this.ob = this.http.post("http://localhost:8080/demo/add", data).subscribe();

}

它在控制台上用输入值苹果记录{fruit: "apple"}在表单提交中，但是我在表单提交时收到HTTP 400错误的请求。我得到的错误是

error: "Bad Request"
message: "Required String parameter 'fruit' is not present"
path: "/demo/add"
status: 400

即使对象包含日志中所示的水果字段，为什么它仍会导致错误

Spring控制器是

    @Controller 
    @CrossOrigin(origins="*")
    @RequestMapping(path="/demo")
    public class MainController {
      @Autowired
      private FruitsRepository fruitsRepository;

      @PostMapping(path="/add") 
      public void addNewUser(@RequestParam String fruit) {
          Fruits fruits=new Fruits();
          fruits.setName(fruit);
          fruitsRepository.save(fruits);
    }
}

如何解决此问题？

Answer 1

您不仅要发送整个对象，而且要发送名称。
{fruit: "apple"}不是字符串，而是对象。

要仅发送水果名称（以字符串形式发送），请按照以下方式进行POST：

this.ob = this.http.post("http://localhost:8080/demo/add", data.fruit).subscribe();

Answer 2

@RequestParam String fruit需要查询参数，而不是请求正文中的值。即路径为http://localhost:8080/demo/add?fruit=apple而不是{"fruit": "apple"}的请求发布到http://localhost:8080/demo/add。

Answer 3

定义哪种类型的数据

     onClickSubmit({data}: {data}) {
       alert("Entered Fruitname : " + data.fruit);
       console.log( data);
       this.ob = this.http.post("http://localhost:8080/demo/add", data.fruit).subscribe();

     }

并且后端只期望一个变量名字符串，因为水果只能发送水果变量

Angular：在请求后获取Http 400错误请求

3 个答案: