この記事を書いた背景: Angular の $http.post() を使用してデータを送信する方法を学習していたとき、バックグラウンドでパラメーター値を受け取ることができなかったので、解決策を見つけるために関連情報を参照しました。
この記事を書く目的: 上記の記事の解決策を通じて、私自身の経験と組み合わせて、次の発見をまとめました。
フロントエンド: html、jquery、angular
バックエンド: java、springmvc
1. 一般的に使用される投稿送信および受信メソッド
フロントエンドは jquery を使用して、データを提出します。
1 2 3 4 5 6 7 8 9 | $.ajax({
url:& #39;/carlt/loginForm',
method: & #39;POST',
data:{ "name" : "jquery" , "password" : "pwd" },
dataType:& #39;json',
success: function (data){
}
});
|
ログイン後にコピー
バックエンド Java 受信:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @Controller
public class UserController {
@ResponseBody
@RequestMapping (value= "/loginForm" ,method=RequestMethod.POST)
public User loginPost(User user){
System.out.println( "username:" +user.getName());
System.out.println( "password:" +user.getPassword());
return user;
}
}
model(不要忘记get、set方法):
public class User {
private String name;
private String password;
private int age;
}
|
ログイン後にコピー
バックグラウンド印刷:
ユーザー名:jquery
パスワード:pwd
インターフェイスを呼び出して表示されるフロントエンドの戻り結果:
2. angularJs の post メソッドを使用して
1 2 3 4 5 6 7 8 9 10 | <div ng-app= "myApp" ng-controller= "formCtrl" >
<form novalidate>
UserName:<br>
<input type= "text" ng-model= "user.username" ><br>
PassWord:<br>
<input type= "text" ng-model= "user.pwd" >
<br><br>
<button ng-click= "login()" >登录</button>
</form>
</div>
|
ログイン後にコピー
js コード:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var app = angular.module(& #39;myApp', []);
app.controller(& #39;formCtrl', function($scope,$http) {
$scope.login = function () {
$http({
url:& #39;/carlt/loginForm',
method: & #39;POST',
data: {name:& #39;angular',password:'333',age:1}
}).success( function (){
console.log( "success!" );
}).error( function (){
console.log( "error" );
})
};
});
|
ログイン後にコピー
バックグラウンド印刷結果:
ユーザー名:null
パスワード:null:
フロントエンドの表示:
3. angular を解決する 投稿質問を送信します。
上記の記事を読んだ方でもすでに解決方法はご存知かと思います。この記事では、angular がデータを送信する方法を変更し、より jquery に近づけています。
試してみましたが、うまくいきました。それから別の方法を試してみました。次のように:
フロントエンドは変更されず、依然として:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var app = angular.module(& #39;myApp', []);
app.controller(& #39;formCtrl', function($scope,$http) {
$scope.login = function () {
$http({
url:& #39;/carlt/loginForm',
method: & #39;POST',
data: {name:& #39;angular',password:'333',age:1}
}).success( function (){
console.log( "success!" );
}).error( function (){
console.log( "error" );
})
};
});
|
ログイン後にコピー
バックエンドは変更されましたが、Angular は json オブジェクトを送信するため、User の前に @RequstBody を追加します:
1 2 3 4 5 6 7 8 9 10 11 | @Controller
public class UserController {
@ResponseBody
@RequestMapping(value= "/loginForm" ,method=RequestMethod.POST)
public User loginPost(@RequestBody User user){
System.out.println( "username:" +user.getName());
System.out.println( "password:" +user.getPassword());
return user;
}
}
@RequestBody
|
ログイン後にコピー
関数:
i) このアノテーションは、Request リクエストの本文部分を読み取り、システムのデフォルト設定の HttpMessageConverter を使用して解析し、対応するデータをバインドするために使用されます。オブジェクト上で返されるオブジェクト;
ii) 次に、HttpMessageConverter によって返されるオブジェクト データをコントローラー内のメソッドのパラメーターにバインドします。
使用タイミング:
A) GETメソッドとPOSTメソッドのタイミングはリクエストヘッダContent-Typeの値により判断します:
application/x-www-form-urlencoded、オプション (つまり、この場合のデータは @RequestParam、@ModelAttribute も処理でき、もちろん @RequestBody も処理できるため、必要ありません)。 > multipart/form- データは処理できません (つまり、この形式のデータは @RequestBody を使用して処理できません);
他の形式が必要です (他の形式には application/json、application/xml などが含まれます。これらのデータは形式は @RequestBody を使用して処理する必要があります) ;
B) PUT モードで送信する場合、
リクエスト ヘッダー Content-Type:
application/x-www- の値に基づいて判断しますform-urlencoded、必須。
multipart /form-data、処理できません。
他の形式が必要です。
注: リクエストの本文部分のデータ エンコード形式は、Content-Type によって指定されます。ヘッダー部分の
4. 解決策 角度の問題を解決した後、元の方法で投稿リクエストを送信すると、jquery がエラー (エラー コード 415) を報告することがわかりました。
次のメソッドは jquery 送信の問題を解決できます:
1 2 3 4 5 6 7 8 9 10 | $.ajax({
url:& #39;/carlt/loginForm',
method: & #39;POST',
contentType:& #39;application/json;charset=UTF-8',
data:JSON.stringify({ "name" : "jquery" , "password" : "pwd" }),
dataType:& #39;json',
success: function (data){
}
});
|
ログイン後にコピー
jsonオブジェクト変換json文字列: JSON.stringify(jsonObj);
上記はangularの$http.post()がdata_AngularJSコンテンツを送信する際にバックグラウンドでパラメータ値を受け取れない問題を解決する方法で、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をフォローしてください。