2017년 7월 26일 수요일

Jackson 이용, member목록 가져오기, 수정하기


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){


1
2
3
4
// DAO
        public Test getMemberOne(String p){ 
            return sqlSession.selectOne("Test1.selectid", p);
        }
cs


1
2
3
4
// 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<StringString> 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<StringString> map = new HashMap<StringString>();
        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);

1
2
3
4
5
6
// 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

1
2
3
4
5
// 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");


-----------------------수정 완료 처리 됨.---------------------


댓글 없음:

댓글 쓰기