웹 프론트엔드 JS 튜토리얼 앵귤러 포스트 요청 후 SpringMVC 백그라운드에서 매개변수 값을 수신할 수 없는 문제를 해결하는 방법_AngularJS

앵귤러 포스트 요청 후 SpringMVC 백그라운드에서 매개변수 값을 수신할 수 없는 문제를 해결하는 방법_AngularJS

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

이것은 내 백그라운드 SpringMVC 컨트롤러가 isform 매개변수를 수신하고 간단히 해당 값을 입력하는 방법입니다.

@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;
 
  }
로그인 후 복사

첫 페이지에서 양식 제출을 위한 게시물 요청을 보냅니다


백그라운드에서 값을 가져오지 못한 것으로 확인되었습니다

나중에 제가 생각한 첫 번째 해결책은 컨트롤러 메서드 매개변수에 requestbody를 추가하여 json 매개변수를 받는 것이었습니다.

@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;
 
  }
로그인 후 복사

하지만 isform의 값 결과는 여전히 null입니다.
그러다가 이전 프로젝트의 게시물 요청 수신 매개변수를 비교한 결과 흥미로운 현상을 발견했습니다.

다음은 Angular의 기본 요청 헤더입니다.

$httpProvider.defaults.headers.post: (POST 요청의 헤더 기본값)

콘텐츠 유형: 애플리케이션/json

$httpProvider.defaults.headers.put(PUT 요청의 헤더 기본값)

콘텐츠 유형: 애플리케이션/json

Angular의 post와 put은 모두 application/json,

jquery 게시물 요청의 "Content-Type"은 기본적으로 "application/x-www-form-urlencoded"로 설정되어 있으므로 기본 Content-Type인 Angle을 변경했습니다.

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';
 
});
로그인 후 복사

다음 요청 본문은 이렇게 되는데 나중에 isform 값을 아직 가져오지 못해서

오랜 시간 확인 끝에 한 외국인 블로그에서 그 이유를 찾았습니다:
기본적으로 jQuery는 Content-Type: x-www-form-urlencoded 및 친숙한 foo=bar&baz=moe 직렬화를 사용하여 데이터를 전송하지만 AngularJS는 Content-Type: application/json 및 { "foo": "bar", "baz": "moe" } JSON 직렬화
직접 번역:

기본적으로 jQuery는 Content-Type: x-www-form-urlencoded 및 "foo=bar&baz=moe"와 유사한 시퀀스를 사용하여 데이터를 전송하지만 AngularJS는 Content-Type: application/json 및 { " foo": "bar", "baz": "moe" } 이러한 json 시퀀스입니다.

따라서 Content-Type을 x-www-form-urlencoded로 설정한 후에도 시퀀스 형식을 변환해야 합니다.

다음은 제가 외국인들과 함께 연습한 후 직접 테스트한 최종 해결책입니다.

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;
  }];
});
로그인 후 복사

Angular 모듈에 위의 코드를 추가하고 효과를 살펴보겠습니다.


게시물 요청 스타일이 jquery의 게시물 요청 스타일과 일치하는 것으로 확인되었습니다. 사실인가요? ! !

백그라운드의 매개변수 수신 상태를 보면

isform은 이제 정상적으로 매개변수를 받을 수 있게 되었고, 끝났습니다!

위 내용은 Angle의 게시물 요청 백그라운드 수신 매개변수가 null이 되도록 하는 해결 방법입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Ubuntu 24.04에 Angular를 설치하는 방법 Ubuntu 24.04에 Angular를 설치하는 방법 Mar 23, 2024 pm 12:20 PM

Angular.js는 동적 애플리케이션을 만들기 위해 자유롭게 액세스할 수 있는 JavaScript 플랫폼입니다. HTML 구문을 템플릿 언어로 확장하여 애플리케이션의 다양한 측면을 빠르고 명확하게 표현할 수 있습니다. Angular.js는 코드를 작성, 업데이트 및 테스트하는 데 도움이 되는 다양한 도구를 제공합니다. 또한 라우팅 및 양식 관리와 같은 많은 기능을 제공합니다. 이 가이드에서는 Ubuntu24에 Angular를 설치하는 방법에 대해 설명합니다. 먼저 Node.js를 설치해야 합니다. Node.js는 서버 측에서 JavaScript 코드를 실행할 수 있게 해주는 ChromeV8 엔진 기반의 JavaScript 실행 환경입니다. Ub에 있으려면

각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석 각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석 Oct 17, 2022 pm 08:04 PM

각도에서 모나코 편집기를 사용하는 방법은 무엇입니까? 다음 글은 최근 비즈니스에서 사용되는 Monaco-Editor의 활용 사례를 기록한 글입니다.

Angular의 서버 측 렌더링(SSR)을 탐색하는 기사 Angular의 서버 측 렌더링(SSR)을 탐색하는 기사 Dec 27, 2022 pm 07:24 PM

앵귤러 유니버셜(Angular Universal)을 아시나요? 웹사이트가 더 나은 SEO 지원을 제공하는 데 도움이 될 수 있습니다!

페이지로 이동하기 위한 매개변수가 포함된 PHP의 POST 메소드에 대한 간략한 분석 페이지로 이동하기 위한 매개변수가 포함된 PHP의 POST 메소드에 대한 간략한 분석 Mar 23, 2023 am 09:15 AM

PHP 개발자의 경우 POST를 사용하여 매개변수가 있는 페이지로 이동하는 것은 기본적인 기술입니다. POST는 HTTP 요청을 통해 데이터를 서버에 전송하는 방법입니다. 점프 페이지는 서버 측에서 페이지를 처리하고 점프합니다. 실제 개발에서는 특정 기능적 목적을 달성하기 위해 매개변수와 함께 POST를 사용하여 페이지로 이동해야 하는 경우가 많습니다.

프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까? 프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까? Jul 26, 2022 pm 07:18 PM

Angular 프로젝트가 너무 큽니다. 합리적으로 분할하는 방법은 무엇입니까? 다음 글에서는 Angular 프로젝트를 합리적으로 분할하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다. 각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다. Sep 08, 2022 pm 08:29 PM

각도-날짜/시간 선택기 형식을 사용자 정의하는 방법은 무엇입니까? 다음 기사에서는 형식을 사용자 정의하는 방법에 대해 설명합니다. 모든 사람에게 도움이 되기를 바랍니다.

Angular Route에서 미리 데이터를 얻는 방법에 대해 이야기해보겠습니다. Angular Route에서 미리 데이터를 얻는 방법에 대해 이야기해보겠습니다. Jul 13, 2022 pm 08:00 PM

Angular Route에서 미리 데이터를 얻는 방법은 무엇입니까? 다음 글에서는 Angular Route에서 미리 데이터를 얻는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Mar 15, 2024 pm 04:51 PM

Angular 프레임워크의 구성 요소에 대한 기본 표시 동작은 블록 수준 요소에 대한 것이 아닙니다. 이 디자인 선택은 구성 요소 스타일의 캡슐화를 촉진하고 개발자가 각 구성 요소가 표시되는 방법을 의식적으로 정의하도록 장려합니다. CSS 속성 표시를 명시적으로 설정하면 Angular 구성 요소의 표시를 완전히 제어하여 원하는 레이아웃과 응답성을 얻을 수 있습니다.

See all articles