- input type="text" 의 value 값을 가져와서 Json 형태로 Controller에 넘기기
- Mybatis에서 vo 사용하지 않고 hashmap으로 파라미터 전달하기!
JavaScript 방법1 - 조금 복잡한 방법)
- text 타입의 input들을 each 반복문을 돌림
Key 값으로 사용 될 input type의 id를 'dataId' 변수로 저장
Value 값으로 사용 될 input type의 value를 dataValue 변수로 저장
'allData' 배열에 Key, Value 형식으로 저장 (Key 값은 무조건 "큰 따옴표" 로 묶어야함, 왜? 규칙임) - Join 함수를 이용하여 배열을 쉼표(,) 구분자 기준으로 잘라서 하나의 String 배열로 만듦
해당 배열을 중괄호( { } 로 묶어 객체로 표현 후 JSON.parse 함수로 Json으로 변환 (JSON 형식으로 전달을 위해서)

let allData = [];
let allDataPlain ="";
$("input[type='text']").each(function(){
let data = this;
let dataId =data['id']+"";
let dataValue =$(data).val()+"";
allData.push('"' + dataId + '"' +':'+ '"' + dataValue + '"');
})
allDataPlain = JSON.parse( "{" + allData.join(",") + "}" ); //
$.ajax({
url:"/insertList",
type:'POST',
data:allDataPlain,
success:function(){
alert("success")
},
error:function(){
alert("error")
}
})
JavaScript 방법2)
- 바로 객체를 선언하여 ( {} ) 속성명에 값을 추가하는 방식
- reqData[속성명] = 값
let reqData={};
$("input[type='text']").each(function(){
let data = this;
let dataId =data['id']+"";
let dataValue =$(data).val()+"";
reqData[dataId] = dataValue;
})
$.ajax({
url:"/insertList",
type:'POST',
data:reqData,
success:function(){
alert("success")
},
error:function(){
alert("error")
}
})
Controller

- getParameterMap()으로 받은 후 Map<String, Object> 타입으로 전달받아 사용
- Map을 Hash맵으로 변경하여 파라미터로 전달
@RequestMapping(value="/insertList", method = RequestMethod.POST)
public String insertListPost(HttpServletRequest request){
Map<String,Object> reqMap = (Map<String,Object>)request.getParameterMap();
HashMap<String,Object> reqHashMap = new HashMap<String,Object>();
for (String k: reqMap.keySet()) {
reqHashMap.put(k, reqMap.get(k));
System.out.println("key 값 " + k);
String[] value = (String[])reqMap.get(k);
System.out.println("value 값 " + value[0]);
}
return "insertList";
}
반응형
'개발 > 자바스크립트 및 프론트' 카테고리의 다른 글
CSS) 줄 바꿈( word-wrap / word-break ) (0) | 2022.08.22 |
---|---|
(제이쿼리) 게시글 전체 선택 체크박스 만들기 (0) | 2022.08.16 |
(자바스크립트 ) 카카오 로그인 (0) | 2022.08.10 |
(자바스크립트) 카카오 맵 연동하기 (0) | 2022.06.27 |
CSS 개념들 정리 (0) | 2022.05.16 |
댓글