ホームページ > ウェブフロントエンド > jsチュートリアル > Angularの$http.post()_AngularJSでデータを送信する際にバックグラウンドがパラメータ値を受け取れない問題を解決する方法

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

PHP中文网
リリース: 2016-05-16 15:26:42
オリジナル
2559 人が閲覧しました

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

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


1

2

3

4

5

6

7

8

9

$.ajax({

  url:'/carlt/loginForm',

  method: 'POST', 

  data:{"name":"jquery","password":"pwd"},

  dataType:'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;

   

  //setter getter method

 

}

ログイン後にコピー


バックグラウンド印刷:

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

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

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


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&#39;, []);

app.controller(&#39;formCtrl&#39;, function($scope,$http) {

 $scope.login = function() {

  $http({

   url:&#39;/carlt/loginForm&#39;,

   method: &#39;POST&#39;,  

   data: {name:&#39;angular&#39;,password:&#39;333&#39;,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&#39;, []);

app.controller(&#39;formCtrl&#39;, function($scope,$http) {

  $scope.login = function() {

    $http({

      url:&#39;/carlt/loginForm&#39;,

      method: &#39;POST&#39;,     

      data: {name:&#39;angular&#39;,password:&#39;333&#39;,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&#39;,

  method: &#39;POST&#39;,

  contentType:&#39;application/json;charset=UTF-8&#39;,

  data:JSON.stringify({"name":"jquery","password":"pwd"}),

  dataType:&#39;json&#39;,

  success:function(data){

    //...

  }

});

ログイン後にコピー


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

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


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート