Angularの$http.post()_AngularJSでデータを送信する際にバックグラウンドがパラメータ値を受け取れない問題を解決する方法

この記事を書いた背景: Angular の $http.post() を使用してデータを送信する方法を学習していたとき、バックグラウンドでパラメーター値を受け取ることができなかったので、解決策を見つけるために関連情報を参照しました。

この記事を書く目的: 上記の記事の解決策を通じて、私自身の経験と組み合わせて、次の発見をまとめました。
フロントエンド: html、jquery、angular
バックエンド: java、springmvc
1. 一般的に使用される投稿送信および受信メソッド
フロントエンドは jquery を使用して、データを提出します。

$.ajax({
  url:'/carlt/loginForm',
  method: 'POST',  
  data:{"name":"jquery","password":"pwd"},
  dataType:'json',
  success:function(data){
    //...
  }
});

バックエンド Java 受信:

@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;
  
  //setter getter method

}

バックグラウンド印刷:

ユーザー名:jquery
パスワード:pwd

インターフェイスを呼び出して表示されるフロントエンドの戻り結果:

2. angularJs の post メソッドを使用して

<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 コード:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
 $scope.login = function() {
  $http({
   url:'/carlt/loginForm',
   method: 'POST',   
   data: {name:'angular',password:'333',age:1}  
  }).success(function(){
   console.log("success!");
  }).error(function(){
   console.log("error");
  })
 };
});

バックグラウンド印刷結果:

ユーザー名:null
パスワード:null:

フロントエンドの表示:

3. angular を解決する 投稿質問を送信します。
上記の記事を読んだ方でもすでに解決方法はご存知かと思います。この記事では、angular がデータを送信する方法を変更し、より jquery に近づけています。

試してみましたが、うまくいきました。それから別の方法を試してみました。次のように:

フロントエンドは変更されず、依然として:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
  $scope.login = function() {
    $http({
      url:'/carlt/loginForm',
      method: 'POST',      
      data: {name:'angular',password:'333',age:1}   
    }).success(function(){
      console.log("success!");
    }).error(function(){
      console.log("error");
    })
  };
});

バックエンドは変更されましたが、Angular は json オブジェクトを送信するため、User の前に @RequstBody を追加します:

@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 送信の問題を解決できます:

$.ajax({
  url:'/carlt/loginForm',
  method: 'POST',
  contentType:'application/json;charset=UTF-8',
  data:JSON.stringify({"name":"jquery","password":"pwd"}),
  dataType:'json',
  success:function(data){
    //...
  }
});

jsonオブジェクト変換json文字列: JSON.stringify(jsonObj);

上記はangularの$http.post()がdata_AngularJSコンテンツを送信する際にバックグラウンドでパラメータ値を受け取れない問題を解決する方法で、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をフォローしてください。