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

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

WBOY

풀어 주다： 2016-05-16 15:26:40

원래의

1662명이 탐색했습니다.

이것은 내 백그라운드 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 모듈에 위의 코드를 추가하고 효과를 살펴보겠습니다.