如何解决 http baddata Angular 错误？

Question

我正在开发一个在前端使用 Angular 并在后端使用 J2EE 的应用程序，我制作了一个表单，我必须在其中发布要保存在数据库中的数据
帖子工作正常但我无法在添加后得到服务器响应的问题，总是我得到这个错误（奇怪的是错误是灰色而不是红色，通常）

错误：[$http:baddata] http://errors.angularjs.org/1.6.4/$http/baddata?p0=%7B%22success%22%7D&p1=%7B%7D 在 angular.min.js:6 在 nc (angular.min.js:96) 在 angular.min.js:97 在 q (angular.min.js:7) 在 xd (angular.min.js:97) 在 f (angular.min.js:99) 在 angular.min.js:134 在 m.$digest (angular.min.js:145) 在 m.$apply (angular.min.js:149) 在 l (angular.min.js:102)

这是角码

$scope.wflow = {
    "worcode": "HELLOoo",
    "wordest": "AVDOSS",
    "worstatus": "ACTIF",
    "worheight": 0,
    "lancode": "EN",
    "worlabel": "Salut monde",
    "wordescription": "Salut monde",
    "size": 0
};
$scope.submitForm = function () {
    console.log(JSON.stringify($scope.wflow));

    $http({
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        url: host + 'api/workflow/add',
        data: $scope.wflow
    }).then(function (response) {
        console.log(response);
    }, function (response) {
        console.log(response);
    });

};

这是 Java 的

@RequestMapping(value = "/add", method = RequestMethod.POST)
 @ResponseBody
 public ResponseEntity<String> addWorkflow(@RequestBody LWflow lworkflow){
  service.addWorkflow(lworkflow);
  return new ResponseEntity<String>("{\"success\"}", HttpStatus.OK);
 }

如果需要，这是 html 部分

        <table class="table">
        <tbody>
        <tr>
        <td><b>Code</b></td>
        <td><input type="text" name="worcode" class="form-control" ng-model="wflow.worcode"></td>
        </tr>
        <tr>
        <td><b>Destination</b></td>
        <td><input type="text" name="wordest" class="form-control" ng-model="wflow.wordest"><td>
        </tr>
        <tr>
        <td><b>Status</b></td>
        <td><input type="text" name="worstatus" class="form-control" ng-model="wflow.worstatus"></td>
        </tr>
        <tr>
        <td><b>Height</b></td>
        <td><input type="number" name="worheight" class="form-control" ng-model="wflow.worheight"><td>
        </tr>
        <tr>
        <td><b>Langue</b></td>
        <td><input type="text" name="lancode" class="form-control" ng-model="wflow.lancode"></td>
        </tr>
        <tr>
        <td><b>Label</b></td>
        <td><input type="text" name="worlabel" class="form-control" ng-model="wflow.worlabel"></td>
        </tr>
        <tr>
        <td><b>Description</b></td>
        <td><input type="text" name="wordescription" class="form-control" ng-model="wflow.wordescription"></td>
        </tr>
        <tr>
        <td><b>Taille</b></td>
        <td><input type="number" name="size" class="form-control" ng-model="wflow.size"></td>
        </tr>
        </tbody>
        </table>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
      </form>

注意错误来自errorCallback函数

Answer 1

这个错误可能是因为响应在 json 字符串中，所以角度试图将 json 字符串解析为 JSON。 我使用了 transformResponse 并解决了错误。

$http({
    url : url,
    method : 'POST',
    data: data,
    transformResponse: [
        function (data) { 
            return data; 
        }
    ]
}) 

Answer 2

我使用封装错误消息的对象类解决了问题，并且在角度响应中我捕获了正确的属性。

例子

@RequestMapping(value = "/save", method = RequestMethod.POST, produces= MediaType.APPLICATION_JSON_VALUE)
public default ResponseEntity<S> save(@RequestBody T entidade,HttpServletRequest request){
    try {
        getService().save(entidade.build());
        return new ResponseEntity(entidade, HttpStatus.OK);
    } catch (EasyQuoteServiceException e) {
        return new ResponseEntity(new Message(e.getMessage(),MessageType.ERROR), HttpStatus.BAD_REQUEST);
    }
}

我有一个名为 Message 的类

public class Message implements Serializable{

    private static final long serialVersionUID = 904580124116256409L;

    private String message;
    private MessageType typeMessage;



    public Message() {
        super();
    }
    public Message(String message, MessageType typeMessage) {
        super();
        this.message = message;
        this.typeMessage = typeMessage;
    }
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    public MessageType getTypeMessage() {
        return typeMessage;
    }
    public void setTypeMessage(MessageType typeMessage) {
        this.typeMessage = typeMessage;
    }

}

在angularjs响应方法中

        }).catch(function(error){
            $scope.erromessage=error.data.message;

         });
    }else{
        mensagem+="As senhas não parecem ser iguais;";
    }
    if(mensagem!=""){
        $scope.erromessage = mensagem;
    }
}

Answer 3

这是服务器端问题，因为响应无法被 angular 读取
PS：阅读@georgeawg 的最后评论

Answer 4

试试这个方法

 $http({
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        url: host + 'api/workflow/add',
        data: angular.toJson($scope.wflow)
    }).then(function (response) {
        console.log(response);
    }, function (response) {
        console.log(response);
    });

Answer 5

在这种情况下，您应该像以下示例一样返回您的响应：

@RequestMapping( value = "/add", method = RequestMethod.POST, produces="application/json" )
@ResponseBody
public String saveCustomer(@RequestPart(name = "customer") Customer customer, @RequestPart(name = "file") MultipartFile file) { return "{\"message\": \"success\"}"; }