Javascript 带有正文的 AngularJS $http.post

AngularJS $http.post with body

提问by Mr.wiseguy

I have an application with Cordovaand AngularJS.

我有一个Cordova和AngularJS的应用程序。

With Angular I send a value to my backend application (Spring REST). The method I use for this is $http.post.

使用 Angular，我将一个值发送到我的后端应用程序 ( Spring REST)。我为此使用的方法是$http.post。

---

---

The problem

问题

When I try to send data to my server Spring won't set the values in my entity. Due to this I cannot save my new data.

当我尝试将数据发送到我的服务器时，Spring 不会在我的实体中设置值。因此，我无法保存我的新数据。

---

---

Angular code

角码

My AngularJS code is as follows:

我的 AngularJS 代码如下：

httpService.createInBackend = function (url, data, callback, errorCallback) {
    http.post(url, data)
           .then(function (success) {
              callback(success);
           }, function (error) {
              errorCallback(error.data);
           });
};

I use the following parameters:

我使用以下参数：

url: http://<location>:<port>/<application>/<web_socket_url>

网址： http://<location>:<port>/<application>/<web_socket_url>

data:

数据：

data: {
        {
        "incidentTypeId": 5,
        "priorityId": 1,
        "creationDate": 1449676871234,
        "userId": 1,
        "latitude": <some valid location>,
        "longitude": <some valid location>
        }
    },
    timeout: 4000
}

I use 'data' and not 'params', because I want to send data via the body. I got this to work with a PUT function, that does not differ much from this function.

我使用“数据”而不是“参数”，因为我想通过正文发送数据。我让它与一个 PUT 函数一起工作，它与这个函数没有太大区别。

---

---

My REST controller

我的 REST 控制器

 @RequestMapping(value = "/employee/new", method = RequestMethod.POST)
    public NewEmployee createIncident(@RequestBody NewEmployee employee) {

    return employee;
}

---

---

My NewEmployee model

我的新员工模型

private int employeeId;

private int priorityId;

private String information;

private Date creationDate;

private int userId;

private float longitude;

private float latitude;

---

---

Angular result

角度结果

When using the console, I get the following result from this method:

使用控制台时，我通过此方法得到以下结果：

I send:

我发送：

{
     "employeeId":5,
     "priorityId":1,
     "creationDate":1449677250732,
     "userId":1,
     "information": "hello world!",
     "latitude":<some valid location>,
     "longitude":<some valid location>
}

I recieve:

我收到：

{  
     employeeId: 0
     priorityId: 0
     creationDate: null
     userId: 0
     information: null
     latitude: 0
     longitude: 0   
}

---

---

PostMan

邮差

I tried the same thing with PostMan (Google chrome plugin) and that way my code works. Due to this I do think it is an issue with my AngularJS code.

我用 PostMan（Google chrome 插件）尝试了同样的事情，这样我的代码就可以工作了。因此，我确实认为这是我的 AngularJS 代码的问题。

---

---

I have tried

我试过了

I have tried using the following AngularJS call:

我尝试使用以下 AngularJS 调用：

$http({
    method: 'POST',
    url: url,
    data: data,
    timeout: 4000
}).then(function (success) {
    callback(success);
}, function (error) {
    errorCallback(error);
});

Yet this did not change the result. Still only empty values.

然而这并没有改变结果。仍然只有空值。

---

---

Does anyone know what I am doing wrong?

有谁知道我做错了什么？

采纳答案by Mr.wiseguy

Updated code

更新代码

After changing the $http.post:

更改 $http.post 后：

httpService.createInBackend = function (url, data, callback, errorCallback) {
    http.post(url, data)
           .then(function (success) {
              callback(success);
           }, function (error) {
              errorCallback(error.data);
           });
};

to standard $http type of angular:

到标准的 $http 类型的角度：

$http({
    method: 'POST',
    url: url,
    data: data
}).then(function (success) {
    callback(success);
}, function (error) {
    errorCallback(error);
});

The sending of my data in the body still did not work.

在正文中发送我的数据仍然不起作用。

---

---

Solution

解决方案

The problem with this standard way of the $http request is that it does not accept an object like:

$http 请求的这种标准方式的问题在于它不接受像这样的对象：

data: {
        {
        "incidentTypeId": 5,
        "priorityId": 1,
        "creationDate": 1449676871234,
        "userId": 1,
        "latitude": <some valid location>,
        "longitude": <some valid location>
        }
    },
    timeout: 4000
}

I had to change this to:

我不得不将其更改为：

var incidentInformation = {
    incidentTypeId: $scope.selectedIncident.id,
    priorityId: $scope.priorityId,
    information: $scope.information,
    creationDate: Date.now(),
     userId: JSON.parse(localStorage.getItem('user')).id,
     latitude: location.latitude,
     longitude: location.longitude       
};

and add a new line:

并添加一个新行：

incidentInformation = JSON.stringify(incidentInformation);

I could directly set this value as the data value: (the Timeout has to be done this way and can not be set in the data object)

我可以直接将此值设置为数据值：（超时必须这样做，不能在数据对象中设置）

$http({
   method: 'POST',
   url: url,
   data: incidentInformation,
   timeout: 4000
}).then(function (success) {
   callback(success);
}, function (error) {
   errorCallback(error);
});

With this changed code the backend now recieved the data correctly and my application is able to save the data.

使用此更改后的代码，后端现在可以正确接收数据，并且我的应用程序能够保存数据。

Thanks Yoogeeks for suggesting the standard method. Strange that AngularJS $http."some method" works different than the standard method.

感谢 Yoogeeks 提出标准方法。奇怪的是，AngularJS $http."some method" 的工作方式与标准方法不同。

回答by yoogeeks

Have you tried without shorthand version of $http? I think your code will work if you use something like

你试过没有 $http 的简写版本吗？如果您使用类似的东西，我认为您的代码会起作用

$http({
  method: 'POST',
  url: url,
  data: JSON.stringify(data)
})
.then(function (success) {
  callback(success);
}, function (error) {
  errorCallback(error.data);
});

where

在哪里

data = {
     "employeeId":5,
     "priorityId":1,
     "creationDate":1449677250732,
     "userId":1,
     "information": "hello world!",
     "latitude":<some valid location>,
     "longitude":<some valid location>
}

Further reading...

进一步阅读...