앵귤러 포스트 요청 후 SpringMVC 백그라운드에서 매개변수 값을 수신할 수 없는 문제를 해결하는 방법_AngularJS
이것은 내 백그라운드 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 ? query.substr(0, query.length - 1) : query; }; return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }]; });
Angular 모듈에 위의 코드를 추가하고 효과를 살펴보겠습니다.
게시물 요청 스타일이 jquery의 게시물 요청 스타일과 일치하는 것으로 확인되었습니다. 사실인가요? ! !
백그라운드의 매개변수 수신 상태를 보면
isform은 이제 정상적으로 매개변수를 받을 수 있게 되었고, 끝났습니다!
위 내용은 Angle의 게시물 요청 백그라운드 수신 매개변수가 null이 되도록 하는 해결 방법입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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

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

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