angular-js form post 처리 (spring-modelAttribute 처리)

angular-js 로 post 하면 request 의 inputstream 에는 값이 설정됨(payload)

 jQuery로 post 하면 modelAttribute 에 값이 자동 binding 되며 request 의 inputstream 에는 값이 설정되지 않음.

( 표 1 : chrome에서 network 부분을 일부 발췌하여 캡춰 함)

구분	request-inputstream	modelAttribute	result
angular-js	O	X
angular-js with content-type	X	X
jQuery	X	O

 

 

아래 글을 보면 알 수 있듯이 jquery 와 angularJs 의 데이터 전송처리에는 직렬화 처리의 차이점이 존재한다.

또한 전송 시 content-type이 다른 것을 확인 할 수 있다.

그래서 spring에서 @modelAttribute 로 값을 바인딩 하는 경우 jquery 는 되는데 angular-js는 안되는 현상을 맞이할 수 있다.

출처 : http://stackoverflow.com/questions/19254029/angularjs-http-post-does-not-send-data

The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJS’s transmission natively ... By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { "foo": "bar", "baz": "moe" } JSON serialization, which unfortunately some Web server languages—notably PHP—do not unserialize natively.

그래서 기본 전송 시 해더 정보와 전송 되는 값을 직렬화 처리를 하여 전송하면 angular-js 또한 jquery 와 동일한 결과를 확인할 수 있다. 

 

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

 

출처 : https://gist.github.com/bennadel/11212050

angular-js-form-post

 

데이터 직렬화 처리

 

function serializeData( data ) {

 

  // If this is not an object, defer to native stringification.

  if ( ! angular.isObject( data ) ) {

    return( ( data == null ) ? "" : data.toString() );

  }

 

  var buffer = [];

  // Serialize each key in the object.

  for ( var name in data ) {

    if ( ! data.hasOwnProperty( name ) ) {

      continue;

    }

 

    var value = data[ name ];

    buffer.push(

      encodeURIComponent( name ) + "=" +

      encodeURIComponent( ( value == null ) ? "" : value )

    );

  }

 

  // Serialize the buffer and clean it up for transportation.

  var source = buffer.join( "&" ).replace( /%20/g, "+" );

 

  return( source );

}