고정 헤더 영역
상세 컨텐츠
본문
반응형
Ajax로 배열 또는 값을 넘기는 예제 입니다.
Spring으로 예제를 만들었습니다.
체크박스에 선택된 값을 배열에 넣고 Ajax로 넘기는 예제 입니다.
<!DOCTYPE html>
<html>
<head>
<title>Fruit</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#save").click(function() {
//배열 선언
var fruitArray = [];
$('input[name="fruit"]:checked').each(function(i){//체크된 리스트 저장
fruitArray.push($(this).val());
});
var objParams = {
"user" : $("#user").val(), //유저 저장
"fruitList" : fruitArray //과일배열 저장
};
//ajax 호출
$.ajax({
url : "/checkTest/save",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=UTF-8",
type : "post",
data : objParams,
success : function(retVal){
if(retVal.code == "OK") {
alert(retVal.message);
} else {
alert(retVal.message);
}
},
error : function(request, status, error){
console.log("AJAX_ERROR");
}
});
})
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<input type="checkbox" name="fruit" value="apple">
</td>
<td>
apple
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="fruit" value="banana">
</td>
<td>
banana
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="fruit" value="peach">
</td>
<td>
peach
</td>
</tr>
</table>
<br>
<input type="text" id="user" value="huskdoll">
<button type="button" id="save">SAVE</button>
</body>
</html>
checkTestSave 메소드의 매개변수를 확인 하시기 바랍니다.
반응형
받은값을 System.out.println(); 로 출력해보았습니다.
fruitList ==> @RequestParam(value="fruitList[]") List<String> fruitList
user ==> @RequestParam(value="user") String user
위과 같이 jsp에서 Ajax로 넘어온 값을 Controller에서 받으면 됩니다.
package com.spring.myapp.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class TestController {
//게시글 리스트 조회
@RequestMapping(value = "/checkTest")
public String checkTest(@RequestParam Map<String, Object> paramMap, Model model) {
return "checkTest";
}
//AJAX 호출 (게시글 등록, 수정)
@RequestMapping(value="/checkTest/save", method=RequestMethod.POST)
@ResponseBody
public Object checkTestSave(
@RequestParam(value="fruitList[]") List<String> fruitList,
@RequestParam(value="user") String user
) {
System.out.println("=user=");
System.out.println(user);
System.out.println("=fruit=");
for(String fruit : fruitList) {
System.out.println(fruit);
}
//리턴값
Map<String, Object> retVal = new HashMap<String, Object>();
//성공했다고 처리
retVal.put("code", "OK");
retVal.put("message", "등록에 성공 하였습니다.");
return retVal;
}
}
[예제화면]
반응형
'JavaScript & HTML > JavaScript' 카테고리의 다른 글
| JavaScript 클립보드 복사 (0) | 2021.08.11 |
|---|---|
| sortable (Drag&Drop 활성화 비활성화) (0) | 2021.05.27 |
| selector eq 변수 (0) | 2020.07.14 |
| checkbox serialize 해결방법 (0) | 2020.04.03 |
| radio change 이벤트 예제 입니다. (0) | 2020.01.21 |
댓글 영역