이전 Spring3 + ExtJS 파일업로드 관련하여 포스팅을 한 적이 있습니다.
2014/10/28 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함)
"Deoki"님께서 질문주신 결과
Spring의 @ResponseBody + Jackson JSON 라이브러리를 이용하여
JSON 파싱한 결과
크롬에서는 정상적으로 JSON 값을 받아왔으나
IE에서는 다운로드가 되는 현상이 발생되었습니다.
이러한 현상이 발생하는 이유는
JacksonMessageConverter의 응답타입이 "application/json" 이어서
IE에서는 정상적으로 동작되지 않는 것이었습니다.
그래서 응답타입을 "text/plain"형태로 설정을 변경을 해주어야 합니다.
크롬에서만 작업하다보니 IE에서 문제가 발생한거라는 것을 몰랐었네요;;
만약 "json-simple" 또는 "json-lib" 와같이 파싱해주는 라이브러리 사용시
response.setContentType을 "text/plain" 으로 설정해주면 문제 없이 IE/크롬 등
모든 브라우저에서 정상작동하는 것이라 신경을 쓰지 않았었는데;;;
상단 포스팅 링크의 코드에 대한 실행결과를 확인해 보도록 하겠습니다.
크롬은 정상적으로 메시지 창이 출력되는 반면,
IE에서는 서버에서 응답받은 결과값이 파일로 다운로드처리가 되었습니다.
그럼 이 부분을 해결하기 위하여
<mvc:annotation-driven />
상단 기존 태그를 다음과 같이 코드 변경을 해주도록 합니다.
<mvc:annotation-driven> <mvc:message-converters> <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"> <property name="supportedMediaTypes" value="text/plain;charset=UTF-8"/> </bean> </mvc:message-converters> </mvc:annotation-driven>
위와같이 설정을 해주었다면 다시한번 IE에서 동작을 시켜보도록 하겠습니다.
위와같이 정상적으로 업로드된 파일에 대하여
정상적으로 JSON OBJECT를 받아오는 결과를 확인 할 수 있었습니다.
Spring의 @ResponseBody를 이용한 JSON 구현할때
text/plain 을 적용해주기 위해서는 "mvc:annotation-driven" 태그를
위와같이 적용을 해주는 것이 이 포스팅의 핵심내용입니다.
by 개발로짜
ExtJS 강좌 - ExtJS5 MVC 구조를 이용한 간단 그리드 CRUD 알아보기(2) (5) | 2015.01.07 |
---|---|
ExtJS 강좌 - ExtJS5 MVC 구조를 이용한 간단 그리드 CRUD 알아보기(1) (13) | 2014.12.29 |
ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View/Controller + Model+Store 추가) (0) | 2014.11.26 |
ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View+Controller 연동) (2) | 2014.11.26 |
ExtJS 강좌 - Sencha CMD로 ExtJS 구조 생성하여 연동테스트 해보기 (1) | 2014.11.24 |
이번장은 간단하게 공백제거 함수와 반복문에 대하여 알아보도록 하겠습니다.
문자열 혹은 text와 같이 공백이 들어있을경우
데이터 전송시 문제가 발생할 일이 가끔 발생이 되곤합니다.
양쪽공백을 제거하기 위하여 $.trim()함수를 이용하여
공백을 제거할 수 있습니다.
<input type="text" value=" aaaaa "/>
$(function(){ var value1 = ' abc '; var value2 = $(":text").val(); //공백제거 전 alert("value1 : " + value1+"\n"+"value2 : " + value2); value1 = $.trim(value1); value2 = $.trim(value2); //공백제거 후 alert("value1 : " + value1+"\n"+"value2 : " + value2); })
위 예제는 공백이 존재하는 변수 value1값과 text태그에 양쪽 공백이 존재하는 값을
value 속성에 정의한 후 alert으로 각 출력을 해보았습니다.
위처럼 trim 함수를 이용하여 양쪽 공백을 모두 제거해보았습니다.
이번에는 each 문법을 이용하여 동일 엘리먼트 및
json객체의 값들을 출력해보도록 하겠습니다.
동일한 class명칭 및 같은 엘리먼트들과 같이 하나가 아닌
두개이상일 경우 사용되는 문법입니다.
다음 동일한 text 태그 여러개를 태그로 만들어 본 후
each문을 이용하여 text태그들의 값을 출력해보도록 하겠습니다.
<input type="text" value="a"/><br/> <input type="text" value="b"/><br/> <input type="text" value="c"/><br/> <input type="text" value="d"/>
$(function(){ $(":text").each(function(index){ //방법 1 console.log("this",$(this).val()); //방법 2 console.log("text eq",$(":text").eq(index).val()); }) })
위처럼 각 index별로 콘솔에 값이 출력되었습니다.
위 console명령을 이용하여 2가지 방법으로 값들을 출력해보았습니다.
each문의 첫번째 값은 index값을 의미하고 두번째 값은 object를 의미하는것이지만 엘리먼트 each문에서는 무의미합니다.
$("셀렉터").each({}) 내에서 $(this)를 주게 되면 현재 반복이 위치하는 엘리먼트를 의미합니다.
이어서 json과 같은 object 타입을 each문을 이용하여 출력해보도록 하겠습니다.
기존 body태그의 엘리먼트는 필요가 없으며 스크립트 코드를 다음과 같이 대체합니다.
$(function(){ var json = [{ data : 'a' },{ data : 'b' },{ data : 'c' }] $.each(json,function(index,object){ console.log(index,object.data); }) })
엘리먼트가 아닌 노드에서는 $.each문의 첫번째 입력값으로 json 배열값을 ,
두번째 입력값을 이전 each문과 동일한 function을 지정해주면 되겠습니다.
현재는 이해가 정확히 가지 않으시겠지만
이후 다른 샘플을 진행하면서 이해를 돕도록 하겠습니다.
by 개발로짜
jQuery 8강 - 다양한 이벤트 동작을 알아보도록 하자 (1) | 2015.01.15 |
---|---|
jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기 (2) | 2014.12.01 |
jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1) | 2014.11.27 |
jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4) | 2014.11.15 |
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0) | 2014.11.12 |
이번에는 지정 엘리먼트로부터 찾고자 하는 태그를 찾기위하여 Traversing에 대하여 알아보도록 하겠습니다.
"왜 쓰는가 그냥 찾고자 하는 엘리먼트에 id 값이나 class 값 또는 셀렉터를 이용하여 사용하면 되지 않느냐" 라고 의아해하시는 분들이 계실겁니다.
하지만 프로젝트를 진행하시다 보면 Traversing을 이용하여 작성 할 경우가 상당히 많습니다.
몇가지만을 예로들어서 포스팅하도록 하겠습니다.
지정된 인덱스로 일치하는 엘리먼트들의 집합을 줄인다
셀렉터에의해 필터링된 객체 또는 엘리먼트와 일치하는 요소의 자식엘리먼트 얻기
셀렉터에의해 필터링된 영역으로부터의 부모노드를 가져오기
셀렉터에의해 필터링된 영역에 있는 엘리먼트의 이전형제노드 가져오기
셀렉터에의해 필터링된 영역에 있는 엘리먼트의 다음형제노드 가져오기
상단 샘플구조는 다음과 같습니다.
상단 이미지들을 코드로 다시 작성하여 하나씩 설명해보도록 하겠습니다.
<table> <tr> <td> 첫번째 tr의 첫번째 td </td> <td> 첫번째 tr의 두번쩨 td </td> </tr> <tr> <td> 두번째 tr의 첫번쩨 td </td> <td> 두번째 tr의 두번쩨 td </td> </tr> </table>
$(function(){ //eq() traversing alert($("tr").eq(0).html()); alert($("tr").eq(1).html()); //find() traversing alert($("tr").eq(0).find("td").eq(0).html()); alert($("tr").eq(1).find("td").eq(0).html()); //parent() traversing(둘다 같은 부모를 찾는 코드이므로 결과값 동일) alert($("tr").eq(0).parent().html()); alert($("tr").eq(1).parent().html()); //prev() traversing alert($("tr").eq(0).find("td").eq(1).prev().html()); alert($("tr").eq(1).find("td").eq(1).prev().html()); //next() traversing alert($("tr").eq(0).find("td").eq(0).next().html()); alert($("tr").eq(1).find("td").eq(0).next().html()); })
위코드에 대한 작성이 완료되었다면 실행을 해보도록 하겠습니다.
$("selector").eq(index).html()
해석 : 선택된 엘리먼트의 index번째에 있는 HTML 태그
$("selector").eq(index).find("childselector").eq(childindex).html()
해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째에 있는 HTML 태그
$("selector").eq(index).parent().html()
해석 : 선택된 엘리먼트의 index번째의 노드를 감싸는 부모노드내에 존재하는 HTML 태그
$("selector").eq(index).find("childselector").eq(childindex).prev().html()
해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째의 엘리먼트중 이전 형제노드의 html 태그
$("selector").eq(index).find("childselector").eq(childindex).next().html()
해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째의 엘리먼트중 다음 형제노드의 html 태그
코드를 응용하여 다른 샘플을 만들어서 Traversing에 대하여 습득을 해보도록 합니다.
by 개발로짜
jQuery 8강 - 다양한 이벤트 동작을 알아보도록 하자 (1) | 2015.01.15 |
---|---|
jQuery 7강 - 공백제거(trim) 및 반복문(each)에 대하여 간단하게 알아보자 (2) | 2014.12.02 |
jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1) | 2014.11.27 |
jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4) | 2014.11.15 |
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0) | 2014.11.12 |