Jackson 라이브러리 pom.xml에 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160212</version>
</dependency>
<!-- Jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.dataformat</groupId>
<artifactId>jackson-dataformat-xml</artifactId>
<version>2.7.5</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.3</version>
</dependency>
| cs |
RestController에서
@CrossOrigin(origins="*") 을 사용 하기 위해서는
스프링 버전 4.3 으로 pom에서 바꿔줘야한다.
기본생성자에 먼저 select값을 주기 위해 super();입력 해두자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
public TestController() {
super();
deptList = new ArrayList<String>();
deptList.add("인사부");
deptList.add("기획부");
deptList.add("홍보부");
deptList.add("영업부");
deptList.add("경리부");
positionList = new HashMap<Integer, String>();
positionList.put(1, "1급");
positionList.put(2, "2급");
positionList.put(3, "3급");
positionList.put(4, "4급");
}
| cs |
그러면 JSP에서 이렇게 값을 받아오게 될것이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// JSP
<label style="width:200px">소속부서</label>
<select name="dept" id="dept">
<c:forEach var="tmp" items="${deptList}">
<option value="${tmp}">${tmp}</option>
</c:forEach>
</select><br />
<label style="width:200px">직급</label>
<select name="position" id="position">
<c:forEach var="tmp" items="${positionList}">
<option value="${tmp.key}">${tmp.value}</option>
</c:forEach>
</select><br />
| cs |
Id값을 받아오기 위해 JavaScript를 이용해 받아온 다음 JackSonController로 던져준다
Ajax는 웹과 서버가 분리 되어있기 때문에 바로 서버에서 던질수 없다.
그렇기 때문에 Script를 이용해서 던지는 방법을 사용한것이다.(form, formform 사용불가)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// JavaScript
$('#id').keyup(function(event){
if(event.which == 13){
var id = $('#id').val();
//alert(id);
//http://127.0.0.1:8080/jdh2/json_get_member_one?id=1234
$.post('json_get_member_one',{"id":id}, function(data){
console.log(data);
if(data.check_info == 'y'){
$('#name').val(data.name);
$('#phone').val(data.phone);
$('#duty').val(data.duty);
$('#dept').val(data.dept).attr("selected", "selected");
$('#position').val(data.position).attr("selected", "selected");
}
else {
alert('일치하는 값이 없습니다.');
}
console.log(data);
},'json');
}
});
| cs |
엔터키를 입력하면 실행한다.
$('#id').keyup(function(event){
if(event.which == 13){
해당 주소'jason_get_member_one' 보낸다. 키 "id" 값은 id (위에서 var로 지정해주었다.)
$.post('json_get_member_one',{"id":id},
JSONController에서 값을 받자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// RestController
@RequestMapping(value = "/json_get_member_one",
method = {RequestMethod.GET,RequestMethod.POST},
produces="application/json")
public @ResponseBody Test get_member_one(
@RequestParam("id")String id){
Test p = pDAO.getMemberOne(id);
if(p != null){
p.setCheck_info("y");
}
else {
p = new Test();
p.setCheck_info("n");
}
return p;
}
| cs |
Test 라는 VO형으로 get_mem_one 선언 하고 그 안 값에 param을 통해 id를 받아 오자
public @ResponseBody Test get_member_one(@RequestParam("id")String id){
|
|
// DAO
public Test getMemberOne(String p){
return sqlSession.selectOne("Test1.selectid", p);
}
| cs |
|
|
// XML
<select id = "selectid" resultType = "com.ds.vo.Test" parameterType = "String">
SELECT * FROM test WHERE id=#{id}
</select>
| cs |
값이 jason으로 잘넘어오는지 주소창을 통해서 확인해 보자
가져온 값을 p로 이름을 주고
p (VO)가 null 이 아니라면 vo안 check_info에 y를 주고 (아이디가 존재함을 의미함)
null이라면 n를 입력한 후
p 를 return 한다.
Test p = pDAO.getMemberOne(id);
if(p != null){
p.setCheck_info("y");
}
else {
p = new Test();
p.setCheck_info("n");
}
return p;
다시 Script로 돌아 와서 data값을 읽어 온다.
data안 check_info가 y냐 n 냐에 따라 jsp가 실행된다.
function(data){
console.log(data);
if(data.check_info == 'y'){
$('#name').val(data.name);
$('#phone').val(data.phone);
$('#duty').val(data.duty);
$('#dept').val(data.dept).attr("selected", "selected");
$('#position').val(data.position).attr("selected", "selected");
}
else {
alert('일치하는 값이 없습니다.');
}
------------------------------수정하기----------------------------
id로 받아온 값들을 a,b,c,d,e,f 변수로 담아준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// JavaScript
<script src="resources/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn_edit').click(function(){
var a = $('#id').val();
var b = $('#name').val();
var c = $('#dept').val();
var d = $('#position').val();
var e = $('#duty').val();
var f = $('#phone').val();
$.post('json_edit_member_one',{"id":a, "name":b, "dept":c,
"position":d, "duty":e, "phone":f}, function(data){
if(data.ret == "y"){
alert("수정되었습니다.");
}
else{
alert("실패했습니다.");
}
},"json");
});
| cs |
json_edit_member_one으로 키 값과 벨류(위에서 저장한 변수들)를 날려준다.
$.post('json_edit_member_one',{"id":a, "name":b, "dept":c,
"position":d, "duty":e, "phone":f},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// RestController
@RequestMapping(value = "/json_edit_member_one", method = {RequestMethod.GET,RequestMethod.POST},
produces="application/json")
public @ResponseBody Map<String, String> edit_member_one(
@RequestParam("id") String id,
@RequestParam("name") String name,
@RequestParam("dept") String dept,
@RequestParam("position") String position,
@RequestParam("duty") String duty,
@RequestParam("phone") String phone){
Test p = new Test(id,name,dept,position,duty,phone);
int ret = pDAO.updateMemberOne(p);
Map<String, String> map = new HashMap<String, String>();
if(ret <= 0){
map.put("ret", "n");
}
else {
map.put("ret", "y");
}
return map;
}
| cs |
requestParam으로 받은 값들로 파라미터를 준다.
Test p = new Test(id,name,dept,position,duty,phone);
|
|
// XML
<update id = "updateMemberOne" parameterType = "com.ds.vo.Test">
UPDATE test SET name = #{name}, dept = #{dept}, position = #{position}, duty = #{duty}, phone = #{phone}
WHERE id = #{id}
</update>
| cs |
|
|
// DAO
public int updateMemberOne(Test personnel) {
return sqlSession.update("Test1.updateMemberOne", personnel);
}
| cs |
map으로 보낸값을 Script에서 다시 받아와서 처리한다.
function(data){
if(data.ret == "y"){
alert("수정되었습니다.");
}
else{
alert("실패했습니다.");
}
},"json");
-----------------------수정 완료 처리 됨.---------------------
