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

May 16, 2016 pm 03:26 PM
angular null post

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.

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment installer Angular sur Ubuntu 24.04 Comment installer Angular sur Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js est une plateforme JavaScript librement accessible pour créer des applications dynamiques. Il vous permet d'exprimer rapidement et clairement divers aspects de votre application en étendant la syntaxe HTML en tant que langage de modèle. Angular.js fournit une gamme d'outils pour vous aider à écrire, mettre à jour et tester votre code. De plus, il offre de nombreuses fonctionnalités telles que le routage et la gestion des formulaires. Ce guide expliquera comment installer Angular sur Ubuntu24. Tout d’abord, vous devez installer Node.js. Node.js est un environnement d'exécution JavaScript basé sur le moteur ChromeV8 qui vous permet d'exécuter du code JavaScript côté serveur. Être à Ub

Une brève analyse de la façon d'utiliser monaco-editor en angulaire Une brève analyse de la façon d'utiliser monaco-editor en angulaire Oct 17, 2022 pm 08:04 PM

Comment utiliser monaco-editor en angulaire ? L'article suivant enregistre l'utilisation de monaco-editor dans angulaire qui a été utilisé dans une entreprise récente. J'espère qu'il sera utile à tout le monde !

Un article explorant le rendu côté serveur (SSR) dans Angular Un article explorant le rendu côté serveur (SSR) dans Angular Dec 27, 2022 pm 07:24 PM

Connaissez-vous Angular Universel ? Cela peut aider le site Web à fournir un meilleur support SEO !

Une brève analyse de la méthode POST en PHP avec des paramètres pour accéder à la page Une brève analyse de la méthode POST en PHP avec des paramètres pour accéder à la page Mar 23, 2023 am 09:15 AM

Pour les développeurs PHP, utiliser POST pour accéder à des pages avec des paramètres est une compétence de base. POST est une méthode d'envoi de données en HTTP. Il peut soumettre des données au serveur via des requêtes HTTP. La page de renvoi traite et saute la page côté serveur. Dans le développement réel, nous devons souvent utiliser POST avec des paramètres pour accéder aux pages afin d'atteindre certains objectifs fonctionnels.

Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Jul 26, 2022 pm 07:18 PM

Le projet Angular est trop volumineux, comment le diviser raisonnablement ? L'article suivant vous expliquera comment diviser raisonnablement les projets Angular. J'espère qu'il vous sera utile !

Parlons de la façon de personnaliser le format angulaire-datetime-picker Parlons de la façon de personnaliser le format angulaire-datetime-picker Sep 08, 2022 pm 08:29 PM

Comment personnaliser le format angulaire-datetime-picker ? L'article suivant explique comment personnaliser le format. J'espère qu'il sera utile à tout le monde !

Parlons de la façon d'obtenir des données à l'avance dans Angular Route Parlons de la façon d'obtenir des données à l'avance dans Angular Route Jul 13, 2022 pm 08:00 PM

Comment obtenir des données à l’avance dans Angular Route ? L'article suivant vous expliquera comment obtenir des données à l'avance à partir d'Angular Route. J'espère qu'il vous sera utile !

Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Mar 15, 2024 pm 04:51 PM

Le comportement d'affichage par défaut des composants du framework Angular ne concerne pas les éléments au niveau du bloc. Ce choix de conception favorise l'encapsulation des styles de composants et encourage les développeurs à définir consciemment la manière dont chaque composant est affiché. En définissant explicitement l'affichage des propriétés CSS, l'affichage des composants angulaires peut être entièrement contrôlé pour obtenir la mise en page et la réactivité souhaitées.

See all articles