Méthode pour résoudre le problème selon lequel l'arrière-plan ne peut pas recevoir les valeurs des paramètres lors de la soumission de données dans $http.post()_AngularJS d'Angular

Contexte pour la rédaction de cet article : lorsque j'apprenais à utiliser $http.post() d'Angular pour soumettre des données, l'arrière-plan ne pouvait pas recevoir les valeurs des paramètres, j'ai donc consulté les informations pertinentes pour trouver une solution.

Le but de la rédaction de cet article : à travers les solutions contenues dans les articles mentionnés ci-dessus et combinées à ma propre expérience, j'ai résumé les résultats suivants.
Front-end : html, jquery, angulaire
Back-end : java, springmvc
1 Méthodes de soumission et de réception de publications couramment utilisées
Le front-end utilise jquery pour. soumettre des données.

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

Réception backend 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

}

Impression en arrière-plan :

nom d'utilisateur : jquery
mot de passe :pwd

<🎜 > Le résultat du retour frontal affiché en appelant l'interface :

2. Utilisez la méthode post d'angularJs pour soumettre

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

Code 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");
  })
 };
});

Résultat de l'impression en arrière-plan :

nom d'utilisateur:nullmot de passe:null：

Afficher le front-end :

3. Résoudre angulaire Soumettez une question.
Je crois que même ceux qui ont lu les articles mentionnés ci-dessus savent déjà comment résoudre le problème. L'article modifie la façon dont Angular soumet les données, rendant la manière d'Angular de soumettre les données plus proche de jquery.

Je l'ai essayé et ça marche. Ensuite, j'ai essayé une autre manière. Comme suit :

Le front end reste inchangé, toujours :

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

Le back end a changé, mais ajoutez @RequstBody devant User, car angulaire soumet un objet json :

@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

Fonction :

i) Cette annotation est utilisée pour lire la partie du corps de la requête, utiliser le HttpMessageConverter configuré par défaut du système pour analyser, puis lier les données correspondantes. à l'objet à retourner sur l'objet ;

ii) Liez ensuite les données de l'objet renvoyées par HttpMessageConverter aux paramètres de la méthode dans le contrôleur.

Délai d'utilisation :

A) Les délais des méthodes GET et POST sont jugés en fonction de la valeur de l'en-tête de la requête Content-Type :

application/x-www-form-urlencoded, facultatif (c'est-à-dire pas nécessaire, car les données dans ce cas @RequestParam, @ModelAttribute peuvent également être traitées, et bien sûr @RequestBody peuvent également être traitées <🎜) ; > les données multipart/form- ne peuvent pas être traitées (c'est-à-dire que les données dans ce format ne peuvent pas être traitées à l'aide de @RequestBody

D'autres formats sont requis (d'autres formats incluent application/json, application/xml, etc.) ; les formats doivent être traités à l'aide de @RequestBody) ;
B) Lors de la soumission en mode PUT, jugez en fonction de la valeur de
request header Content-Type
 : application/x-www- form-urlencoded, obligatoire ;

multipart /form-data, ne peut pas être traité ;

D'autres formats sont requis
Remarque : le format de codage des données de la partie du corps de la requête est spécifié par le Content-Type ; de la partie en-tête ;

4. Solution Après avoir résolu le problème angulaire, j'ai découvert que jquery signalerait une erreur (code d'erreur 415) lors de la soumission d'une demande de publication de la manière originale.

La méthode suivante peut résoudre le problème de soumission 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 chaîne json de conversion d'objet : JSON.stringify(jsonObj);

La méthode ci-dessus est la méthode pour résoudre le problème selon lequel l'arrière-plan ne peut pas recevoir les valeurs des paramètres lorsque $http.post() d'angular soumet le contenu data_AngularJS, veuillez visiter pour plus de contenu connexe Suivez le site Web PHP chinois (www.php.cn) !