Heim Web-Frontend js-Tutorial Methode zur Lösung des Problems, dass der SpringMVC-Hintergrund nach dem Angular Post request_AngularJS keine Parameterwerte empfangen kann

Methode zur Lösung des Problems, dass der SpringMVC-Hintergrund nach dem Angular Post request_AngularJS keine Parameterwerte empfangen kann

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

Dies ist die Methode für meinen Hintergrund-SpringMVC-Controller, um den isform-Parameter zu empfangen und einfach seinen Wert einzugeben:

@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;
 
  }
Nach dem Login kopieren

Auf der Startseite wird eine Post-Anfrage zum Absenden des Formulars gesendet


Es wurde festgestellt, dass der Wert nicht im Hintergrund ermittelt wurde

Die erste Lösung, die mir später einfiel, bestand darin, requestbody zu den Controller-Methodenparametern hinzuzufügen, um die JSON-Parameter zu erhalten:

@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;
 
  }
Nach dem Login kopieren

Aber das Wertergebnis von isform ist immer noch null,
Dann habe ich die Parameter für den Empfang von Post-Anfragen in früheren Projekten verglichen und ein interessantes Phänomen festgestellt:

Das Folgende sind die Standard-Anfrageheader von Angular:

$httpProvider.defaults.headers.post: (Header-Standardeinstellungen für POST-Anfragen)

Inhaltstyp: application/json

$httpProvider.defaults.headers.put(Header-Standardwerte für PUT-Anfragen)

Inhaltstyp: application/json

Angulars Post und Put sind beide application/json,

Der „Content-Type“ der Post-Anfrage von jquery ist standardmäßig „application/x-www-form-urlencoded“, daher habe ich den Standard-Content-Type in „angular“ geändert,

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';
 
});
Nach dem Login kopieren

Der nächste Anforderungstext sieht so aus, aber der Wert von isform wird später immer noch nicht erhalten,

Nach langer Suche fand ich den Grund auf dem Blog eines Ausländers:
Standardmäßig überträgt jQuery Daten mit Content-Type: x-www-form-urlencoded und der bekannten foo=bar&baz=moe-Serialisierung, überträgt Daten jedoch mit Content-Type: application/json und {. „foo“: „bar“, „baz“: „moe“ } JSON-Serialisierung
Von mir selbst übersetzt:

Standardmäßig überträgt jQuery Daten mit Content-Type: x-www-form-urlencoded und einer Sequenz ähnlich „foo=bar&baz=moe“, AngularJS überträgt Daten jedoch mit Content-Type: application/json und { " foo": "bar", "baz": "moe" } eine solche JSON-Sequenz.

Nachdem Sie Content-Type auf x-www-form-urlencodedand gesetzt haben, müssen Sie noch das Format der Sequenz konvertieren,

Das Folgende ist die endgültige Lösung, die ich selbst getestet habe, nachdem ich mit Ausländern geübt habe:

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;
  }];
});
Nach dem Login kopieren

Fügen Sie den obigen Code im Winkelmodul hinzu und sehen Sie sich den Effekt an:


Ich habe festgestellt, dass der Post-Request-Stil mit dem Post-Request-Stil von jquery übereinstimmt. Stimmt das? ! !

Sehen Sie sich den Parameter-Empfangsstatus im Hintergrund an,

isform kann jetzt normal Parameter empfangen und fertig!

Das Obige ist die Lösung dafür, dass die Post-Request-Hintergrundempfangsparameter von Angular null sind. Ich hoffe, es wird für das Lernen aller hilfreich sein.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So installieren Sie Angular unter Ubuntu 24.04 So installieren Sie Angular unter Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js ist eine frei zugängliche JavaScript-Plattform zum Erstellen dynamischer Anwendungen. Es ermöglicht Ihnen, verschiedene Aspekte Ihrer Anwendung schnell und klar auszudrücken, indem Sie die Syntax von HTML als Vorlagensprache erweitern. Angular.js bietet eine Reihe von Tools, die Sie beim Schreiben, Aktualisieren und Testen Ihres Codes unterstützen. Darüber hinaus bietet es viele Funktionen wie Routing und Formularverwaltung. In dieser Anleitung wird erläutert, wie Angular auf Ubuntu24 installiert wird. Zuerst müssen Sie Node.js installieren. Node.js ist eine JavaScript-Ausführungsumgebung, die auf der ChromeV8-Engine basiert und es Ihnen ermöglicht, JavaScript-Code auf der Serverseite auszuführen. In Ub sein

Eine kurze Analyse der Verwendung des Monaco-Editors in Angular Eine kurze Analyse der Verwendung des Monaco-Editors in Angular Oct 17, 2022 pm 08:04 PM

Wie verwende ich den Monaco-Editor in Angular? Der folgende Artikel dokumentiert die Verwendung des Monaco-Editors in Angular, der kürzlich in einem Unternehmen verwendet wurde. Ich hoffe, dass er für alle hilfreich sein wird!

Ein Artikel über serverseitiges Rendering (SSR) in Angular Ein Artikel über serverseitiges Rendering (SSR) in Angular Dec 27, 2022 pm 07:24 PM

Kennen Sie Angular Universal? Es kann dazu beitragen, dass die Website eine bessere SEO-Unterstützung bietet!

Eine kurze Analyse der POST-Methode in PHP mit Parametern zum Springen zur Seite Eine kurze Analyse der POST-Methode in PHP mit Parametern zum Springen zur Seite Mar 23, 2023 am 09:15 AM

Für PHP-Entwickler ist die Verwendung von POST zum Springen zu Seiten mit Parametern eine grundlegende Fähigkeit. POST ist eine Methode zum Senden von Daten in HTTP. Sie kann Daten über HTTP-Anfragen an den Server senden und die Seite auf der Serverseite überspringen. In der tatsächlichen Entwicklung müssen wir häufig POST mit Parametern verwenden, um zu Seiten zu springen und bestimmte funktionale Zwecke zu erreichen.

Was soll ich tun, wenn das Projekt zu groß ist? Wie teilt man Angular-Projekte sinnvoll auf? Was soll ich tun, wenn das Projekt zu groß ist? Wie teilt man Angular-Projekte sinnvoll auf? Jul 26, 2022 pm 07:18 PM

Das Angular-Projekt ist zu groß. Wie kann man es sinnvoll aufteilen? Der folgende Artikel zeigt Ihnen, wie Sie Angular-Projekte sinnvoll aufteilen. Ich hoffe, er ist hilfreich für Sie!

Lassen Sie uns darüber sprechen, wie Sie das Angular-DateTime-Picker-Format anpassen Lassen Sie uns darüber sprechen, wie Sie das Angular-DateTime-Picker-Format anpassen Sep 08, 2022 pm 08:29 PM

Wie kann ich das Angular-DateTime-Picker-Format anpassen? Im folgenden Artikel geht es um die Anpassung des Formats. Ich hoffe, er ist für alle hilfreich!

Lassen Sie uns darüber sprechen, wie Sie Daten im Voraus in Angular Route erhalten Lassen Sie uns darüber sprechen, wie Sie Daten im Voraus in Angular Route erhalten Jul 13, 2022 pm 08:00 PM

Wie erhalte ich Daten im Voraus in Angular Route? Im folgenden Artikel erfahren Sie, wie Sie vorab Daten von Angular Route erhalten. Ich hoffe, er ist hilfreich für Sie!

Winkelkomponenten und ihre Anzeigeeigenschaften: Nicht-Block-Standardwerte verstehen Winkelkomponenten und ihre Anzeigeeigenschaften: Nicht-Block-Standardwerte verstehen Mar 15, 2024 pm 04:51 PM

Das Standardanzeigeverhalten für Komponenten im Angular-Framework gilt nicht für Elemente auf Blockebene. Diese Designwahl fördert die Kapselung von Komponentenstilen und ermutigt Entwickler, bewusst zu definieren, wie jede Komponente angezeigt wird. Durch explizites Festlegen der CSS-Eigenschaft display kann die Anzeige von Angular-Komponenten vollständig gesteuert werden, um das gewünschte Layout und die gewünschte Reaktionsfähigkeit zu erreichen.

See all articles