티스토리 뷰
AJAX로 list를 전달해본거 같은데
다시하려니... + VO에 list 객체를 선언하고 넘기려는 처음 본 상황이니...
역시나 또 해맸다
체크 된 값들을 전달하려면 리스트 or 배열로 넘겨야 할텐데 어찌해야할까
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var tempArray = $("input[name=checker]:checked").serializeArray(); var param = {}; var list = []; for(var i = 0; i < tempArray.length; i++){ var obj = {}; obj.tempList = tempArray[i].value; list.push(obj); } param.temp = list; return param; | cs |
첫 줄에 .serializeArray()는 jQuery docs에 자세히 설명이 나와있다!
(자바스크립트에서 받아온 배열을 JSON string으로 바꿔줌)
param 객체는 여러 값들을 VO로 넘기기 위해서 선언
obj 객체의 tempList 안에 JSON 형태로 된 tempArray의 값들을 저장한다.
그리고 list 배열에 obj 객체를 저장
param 객체의 temp에 list 배열을 저장 끝!
이제 AJAX로 값을 전송만 하면 된다.
1 2 3 4 5 6 7 | $.ajax ({ type: 'post', dataType: 'json', url: "/url/address", data: JSON.stringify(param), contentType : 'application/json', success:function(data) { ... | cs |
JSON.stringify(param)으로 param을 다시 JSON객체를 string 형태로 변경
string으로 변경된 JSON 객체가 JSON인지 알려주기 위해서 contentType : 'application/json' 추가
Controller에서 받을 땐 @RequestBody로 해결!
(너무 돌아간거 같은데... 더 좋은 방법을 찾는다면 업데이트 하겠습니다ㅜㅜ)
----------------------------------------- 11.29 추가 -----------------------------------------
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | function respChkList() { var chkArr = $("input[name=chk]:checked"); var aValues = []; var bValues = []; chkArr.each(function(i){ var td = $("#table tr:eq(" + chkArr[i].value + ")").children(); aValues.push(td.siblings(".classA").val()); bValues.push(td.siblings(".classB").text()); }); var param = { aArr : aValues, bArr : bValues } $.ajax ({ type: 'post', url: "/url", data:param, success:function(data) { alert("성공!"); }, | cs |
체크된 값들을 처리하려면 리스트로 보내야하는데 또 다른 방법이다.
배열에 체크된 값들을 담은 후, 객체에 배열을 담아서 ajax로 controller에 보낸다.
1 2 3 4 5 6 7 | public Map<String, Object> process( @RequestParam(value="aArr[]") List<String> aArr, @RequestParam(value="bArr[]") List<String> bArr, HttpSession session) { ... } | cs |
controller에서는 이런 식으로 받으면 끝!
'Javascript' 카테고리의 다른 글
jQuery AJAX 1.5.1 (.done(), .fail()) (0) | 2019.02.03 |
---|---|
동적 rowspan, 동적으로 테이블 행 병합하기 (1) | 2018.11.28 |
jQuery CSS 적용/미적용 (addClass / removeClass) (0) | 2018.11.08 |
- Total
- Today
- Yesterday
- 스프링 부트
- K번째수
- 완주하지 못한 선수
- 객체지향과 디자인패턴
- json
- 알고리즘
- 타겟 넘버
- 자바
- 최솟값
- 예매 알림
- 문자열 내 마음대로 정렬하기
- 다음 맵 api
- 기능개발
- 파이팅코리아
- 텔레그램
- 안드로이드 스튜디오
- 프로그래머스
- 맵 api
- FrogJmp
- 카카오인턴
- API
- 124 나라의 숫자
- codility
- cgv
- 더 나은 내일
- 쇠막대기
- AWS
- java
- 노션트렐로광고X
- Spring
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |