Spring-Boot REST - 不存在必需的String參數

Question

所以，我正在嘗試向本地Spring MVC項目發出POST請求，但每次嘗試時，我都會收到400：Bad Request，標題中指定了錯誤。 不知道為什么，因為當我檢查發送的是什么時，它是正確的。

Spring REST控制器請求

@RequestMapping(value="/add", method = RequestMethod.POST)
void addPet(@RequestParam String name, @RequestParam String photo, @RequestParam String status) {
    Pet pet = new Pet(name, photo, status);
    this.petRepo.save(pet);
}

AngularJS請求發送數據

$http({
       method: "post",
       url: "http://localhost:8080/pet/add",
       data:{
           name: angular.element("#name")[0].value,
           photo: angular.element("#photo")[0].value,
           status: angular.element("#status")[0].value
       }
    }).success(function(data, status) {

        })
        .error(function(data, status) {
            alert("Error");
            console.log(data);
            console.log(status);
        });

調用AngularJS函數的前端HTML

<div class="form-group">
        <label for="name">Pet Name</label>
        <input type="text" class="form-control" id="name">
    </div>
    <div class="form-group">
        <label for="photo">Photo URL</label>
        <input type="text" class="form-control" id="photo">
    </div>
    <div class="form-group">
        <label for="status">Status</label>
        <input type="text" class="form-control" id="status" placeholder="Something descriptive like 'Available' or 'Taken'">
    </div>
    <div class="form-group">
        <div class="btn-group">
            <button type="button" class="btn btn-primary" ng-click="preview()">Preview</button>
            <button type="button" class="btn btn-success" ng-click="submit()">Submit</button>
            <button type="button" class="btn btn-danger" ng-click="clear()">Clear</button>
        </div>
    </div>

Answer 1

您在后端使用@RequestParam但是在角度中您將值放在請求的正文中。

您必須在后端使用@RequestBody或調整前端以將值放入url參數中。

Answer 2

找到了答案。 我按照上面的SSH回答前端，對於后端，我將功能更改為：

void addPet(@RequestBody Pet pet)

Answer 3

試試這樣

<div class="form-group">
      <label for="name">Pet Name</label>
<input type="text" class="form-control" ng-model="form.name" id="name">
   </div>
<div class="form-group">
    <label for="photo">Photo URL</label>
    <input type="text" class="form-control" ng-model="form.photo"  id="photo">
</div>
<div class="form-group">
    <label for="status">Status</label>
    <input type="text" class="form-control" ng-model="form.status"  id="status" placeholder="Something descriptive like 'Available' or 'Taken'">
</div>
<div class="form-group">
    <div class="btn-group">
        <button type="button" class="btn btn-primary" ng-click="preview()">Preview</button>
        <button type="button" class="btn btn-success" ng-click="submit(form)">Submit</button>
        <button type="button" class="btn btn-danger" ng-click="clear()">Clear</button>
    </div>
</div>

在控制器中使用它

 $scope.form = {"name":"","photo":"","status":""}
 $http({
   method: "post",
   url: "http://localhost:8080/pet/add",
   data:{
       name: $scope.form.name,
       photo: $scope.form.photo,
       status: $scope.form.status
   }
}).success(function(data, status) {

    })
    .error(function(data, status) {
        alert("Error");
        console.log(data);
        console.log(status);
});