Maison > interface Web > js tutoriel > Méthode pour résoudre le problème selon lequel l'arrière-plan SpringMVC ne peut pas recevoir les valeurs des paramètres après la publication angulaire request_AngularJS

Méthode pour résoudre le problème selon lequel l'arrière-plan SpringMVC ne peut pas recevoir les valeurs des paramètres après la publication angulaire request_AngularJS

WBOY
Libérer: 2016-05-16 15:26:40
original
1658 Les gens l'ont consulté

C'est la méthode utilisée par mon contrôleur SpringMVC en arrière-plan pour recevoir le paramètre isform et saisir simplement sa valeur :

@RequestMapping(method = RequestMethod.POST)
  @ResponseBody
  public Map<String, Object> save(
      @RequestParam(value = "isform", required = false) String isform) {
    System.out.println("isform value: " + isform);
    return null;
 
  }
Copier après la connexion

La première page envoie une demande de publication pour soumettre le formulaire


Il a été constaté que la valeur n'a pas été obtenue en arrière-plan

La première solution à laquelle j'ai pensé plus tard était d'ajouter requestbody aux paramètres de la méthode du contrôleur pour recevoir les paramètres json. Modifiez-le comme suit :
.

@RequestMapping(method = RequestMethod.POST)
  @ResponseBody
  public Map<String, Object> save(
      @RequestParam(value = "isform", required = false) @RequestBody String isform) {
    System.out.println("isform value: " + isform);
    return null;
 
  }
Copier après la connexion

Mais la valeur résultat d'isform est toujours nulle,
Ensuite, j'ai comparé les paramètres de réception des demandes de publication dans des projets précédents, et j'ai trouvé un phénomène intéressant,

Voici les en-têtes de requête par défaut d'Angular :

$httpProvider.defaults.headers.post : (en-tête par défaut pour les requêtes POST)

Type de contenu : application/json

$httpProvider.defaults.headers.put (en-tête par défaut pour les requêtes PUT)

Type de contenu : application/json

Le post et le put d'Angular sont tous deux application/json,

Le "Type de contenu" de la demande de publication de jquery est par défaut "application/x-www-form-urlencoded", j'ai donc modifié le type de contenu par défaut de angulaire,

app.config(function($httpProvider) {
  $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
});
Copier après la connexion

Le corps de la requête suivante devient comme ceci, mais la valeur de isform n'est toujours pas obtenue plus tard,

Après une longue vérification, a trouvé la raison sur le blog d'un étranger :
Par défaut, jQuery transmet les données en utilisant Content-Type : x-www-form-urlencoded et la sérialisation familière foo=bar&baz=moe AngularJS, cependant, transmet les données en utilisant Content-Type : application/json et {. "foo": "bar", "baz": "moe" } Sérialisation JSON
Traduit par moi-même :

Par défaut, jQuery transmet les données en utilisant Content-Type : x-www-form-urlencoded et une séquence similaire à "foo=bar&baz=moe", cependant AngularJS transmet les données en utilisant Content-Type : application/json et { " foo": "bar", "baz": "moe" } une telle séquence json.

Donc, après avoir défini Content-Type sur x-www-form-urlencodedand, vous devez toujours convertir le format de la séquence,

Voici la solution finale que j'ai moi-même testée après avoir pratiqué avec des étrangers :

app.config(function($httpProvider) {
  $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    /**
     * The workhorse; converts an object to x-www-form-urlencoded serialization.
     * @param {Object} obj
     * @return {String}
     */
    var param = function(obj) {
      var query = '';
      var name, value, fullSubName, subName, subValue, innerObj, i;
 
      for (name in obj) {
        value = obj[name];
 
        if (value instanceof Array) {
          for (i = 0; i < value.length; ++i) {
            subValue = value[i];
            fullSubName = name + '[' + i + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&';
          }
        } else if (value instanceof Object) {
          for (subName in value) {
            subValue = value[subName];
            fullSubName = name + '[' + subName + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&';
          }
        } else if (value !== undefined && value !== null) {
          query += encodeURIComponent(name) + '='
              + encodeURIComponent(value) + '&';
        }
      }
 
      return query.length &#63; query.substr(0, query.length - 1) : query;
    };
 
    return angular.isObject(data) && String(data) !== '[object File]'
        &#63; param(data)
        : data;
  }];
});
Copier après la connexion

Ajoutez le code ci-dessus dans le module angulaire et voyons l'effet :


J'ai trouvé que le style de demande de publication est cohérent avec le style de demande de publication de jquery. Est-ce vrai ? ! !

Regardez l'état de réception des paramètres en arrière-plan,

isform peut désormais recevoir les paramètres normalement, et le tour est joué !

Ce qui précède est la solution pour que les paramètres de réception en arrière-plan de la demande de publication d'Angular soient nuls. J'espère que cela sera utile à l'apprentissage de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal