web-dev-qa-db-ja.com

ボディ付きAngularJS $ http.post

CordovaおよびAngularJSのアプリケーションがあります。

Angularで値をバックエンドアプリケーションに送信します（Spring REST）。これに使用する方法は$ http.postです。

問題

サーバーにデータを送信しようとすると、Springはエンティティに値を設定しません。このため、新しいデータを保存できません。

角度コード

私のAngularJSコードは次のとおりです。

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

次のパラメーターを使用します。

uRL：http://<location>:<port>/<application>/<web_socket_url>

データ：

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

本文を介してデータを送信したいので、「params」ではなく「data」を使用します。私はこれをPUT関数で動作させるようにしましたが、この関数と大差ありません。

My RESTコントローラ

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

    return employee;
}

My NewEmployeeモデル

private int employeeId;

private int priorityId;

private String information;

private Date creationDate;

private int userId;

private float longitude;

private float latitude;

角度結果

コンソールを使用すると、このメソッドから次の結果が得られます。

以下を送信します：

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

受け取る：

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

PostMan

私はPostMan（Google chrome plugin）で同じことを試しましたが、コードが機能するので、AngularJSコードに問題があると思います。

試しました

次のAngularJS呼び出しを使用してみました：

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

それでも結果は変わりませんでした。まだ空の値のみ。

誰かが私が間違っていることを知っていますか？

javascriptangularjsjsonspringcordova
7
Mr.wiseguy

更新されたコード

$ http.postを変更した後：

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

標準の$ httpタイプの角度に：

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

本文のデータの送信はまだ機能しませんでした。

ソリューション

$ httpリクエストのこの標​​準的な方法の問題は、次のようなオブジェクトを受け入れないことです。

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

これを次のように変更する必要がありました。

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       
};

新しい行を追加します。

incidentInformation = JSON.stringify(incidentInformation);

この値をデータ値として直接設定できます：（タイムアウトはこの方法で行う必要があり、データオブジェクトで設定することはできません）

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

この変更されたコードにより、バックエンドはデータを正しく受信し、アプリケーションはデータを保存できます。

標準的な方法を提案してくれたYoogeekに感謝します。奇妙なことに、AngularJS $ http。 "some method"は標準の方法とは動作が異なります。

5
Mr.wiseguy

$ httpの省略バージョンなしで試しましたか？私はあなたが次のようなものを使用すればあなたのコードは機能すると思います

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

どこ

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

さらに読む...

12
yoogeeks