使用 Angular js 调用具有多个数据的 Web 服务

Question

我是 angular js 的新手，我想调用在他的请求正文中使用多个数据的 web 服务（用 Spring REST 实现），但我现在不知道如何进行解析。有人能帮助我吗 ？

这是我在控制器中的 Spring 方法：

@RequestMapping(value = "/addpost", method = RequestMethod.POST, headers = "Accept=application/json")
    public @ResponseBody String addpost(@RequestBody PostDto post, @RequestBody UserDto user) {
        postservice.addPost(post, user);
        return "post inserted";

    }

这就是我尝试调用此方法的方式

$scope.addPost=function(x,y){

        $http.post('http://localhost:8080/wall/addpost',[x,y]).
          success(function(data, status, headers, config) {
              $scope.persons.push(data);
             $scope.user="";
             $scope.post="";
          }).
          error(function(data, status, headers, config) {
              alert("erreur");

          })

Answer 1

如果您查看$http API，您会发现$http.post 第二个参数包含我们要发布到服务器的对象的json。这样就可以{post: x, user: y} & 然后JSON.stringify() 那个json & 将它传递给服务器。您的服务器端方法将无法理解发送数据中的数组。

代码

$scope.addPost = function(x, y) {

  $http.post('http://localhost:8080/wall/addpost', {
    post: x, //assuming x is post
    user: y //assuming y is use r
  }, headers: {
             'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
             }).
  success(function(data, status, headers, config) {
    $scope.persons.push(data);
    $scope.user = "";
    $scope.post = "";
  }).
  error(function(data, status, headers, config) {
    alert("erreur");
  })
}

希望对您有所帮助，谢谢。

Answer 2

您需要使用 application/x-www-form-urlencoded 跨数据发送。

$http({
    method: 'POST',
    url: 'http://localhost:8080/wall/addpost',
    data: $.param({post: x, user: y}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

更多详情请参阅此答案How can I post data as form data instead of a request payload?

你的函数定义也应该是

@RequestMapping(value = "/addpost", method = RequestMethod.POST, headers = "Accept=application/json")
    public @ResponseBody String addpost(@RequestParam PostDto post, @RequestParam UserDto user) {
        postservice.addPost(post, user);
        return "post inserted";

    }

Answer 3

AngularJS 处理 POST's 的方式与您可能习惯的方式不同（例如 jQuery）。我要做的一件事是为应用程序的.config() 设置默认方式来处理 $http 请求，将标头默认为application/x-www-form-urlencoded 并在发出请求之前序列化对象。

angular.module('yourApp', [])

    .config(['$httpProvider', function ($httpProvider) {

        // default header
        $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

        // using transformRequest this gets handled before each $http execution

        $httpProvider.defaults.transformRequest = function (data) {
            if (data === undefined) {
                return data;
            }

            return angular.isObject(data) && String(data) !== '[object File]' 
                ? $.param(data) // serialize it if it's an object
                : data;         // otherwise leave it alone
        };
    });

现在您可以像往常一样使用它了：

$http.post('url', { /* your data in an object */ });