Spring 개발자 수업 105일차(1) - jQuery Ajax를 이용한 데이터 가져오기/보내기

jQuery Ajax를 이용한 데이터 가져오기/보내기

- 오늘은 ajax를 이용해서 데이터 주고 받는 페이지를 직접 만들어 보자.

 

[ 준비 작업 ]

1. pom.xml
    - 자바, 스프링 버전
    - Lombok
    - MyBatis
    - Log4j
    - Jackson
    - JSON

2. web.xml
    - 인코딩 처리(UTF-8)

3. root-context.xml
    - datasource, log4j, sessionfactory 설정

4. 파일 생성
    - com.test.ajax > AjaxController.java
                    > AjaxDAO.java
                    > UserDTO.java
    - com.test.ajax.mapper > ajax.xml
    - WEB-INF > views > basic > basic.jsp
    
5. DB
    - 예제를 위한 임의의 테이블 tblAjaxUser 생성
    - seq, 이름, 나이, 주소, 생일

 

[ 예제1. 데이터 가져오기(원자값) ]

- tblAjaxUser 테이블에서 원하는 seq번호를 입력해 이름(원자값) 가져오기

  1) JSP (basic.jsp)

<h2>데이터 가져오기(원자값)</h2>
<div id="m1" class="alert alert-info"></div>
<div><input type="button" id="btn1" class="btn btn-default" value="클릭" /></div>

 

  2) Script (basic.jsp)

  - 버튼을 클릭하면 ajax가 독립 실행 되며, 지정해둔 프로퍼티 별로 실행이 된다.

$('#btn1').click(function() {

    $.ajax({
    
        type: 'GET',
        url: '/ajax/basic/m1.action',
        dataType: 'text',
        success: function(result) {
            $('#m1').text(result);
        },
        error: function(a, b, c) {
            console.log(a, b, c)
        }
    });
});

 

 

  3) Controller (AjaxController.java)

@RequestMapping(value = "/basic/m1.action", method = { RequestMethod.GET })
public void m1(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {

    try {
    
       // 브라우저에게 네가 돌려받는 데이터는 순수한 텍스트이다.(통보)
       resp.setContentType("text/plain");
       resp.setCharacterEncoding("UTF-8");
       
       String name = dao.getUserName();
       
       PrintWriter writer = resp.getWriter();
       writer.print(name);
       writer.close();
    
    } catch (IOException e) {
        e.printStackTrace();
    }
}

 

  4) DB작업 (AjaxDAO.java)

@Repository
public class AjaxDAO {

    @Autowired
    private SqlSessionTemplate template;

    public String getUserName() {
        return template.selectOne("ajax.getUserName");
    }
}

 

  5) 쿼리 작성 (ajax.xml)

  - 임시로 seq 번호는 1번을 두도록 하자.

<select id="getUserName" resultType="String">
    select name from tblAjaxUser where seq = 1
</select>

 

- 결과화면

클릭 후 페이지가 깜빡임(새로고침) 없이 seq=1에 해당되는 이름(홍길동)을 가져온걸 볼 수 있다.

 

[ 예제2. 데이터 가져오기(복합값 - 단일 객체) ]

- tblAjaxUser 테이블에서 원하는 seq번호를 입력해 행 전체를 가져오기

  1) JSP (basic.jsp)

<h2>데이터 가져오기(복합값 - 단일 객체)</h2>
<div id="m2" class="alert alert-info"></div>
<div><input type="button" id="btn2" class="btn btn-default" value="클릭" /></div>

 

  2) Script (basic.jsp)

  - 버튼을 클릭하면 ajax가 독립 실행 되며, 지정해둔 프로퍼티 별로 실행이 된다.

  - 기존의 dataType은 단일값으로 text형식으로 받아도 됬지만 이번에는 여러개의 값이므로 json 형식으로 받는다.

$('#btn2').click(function() {
			
    $.ajax({
				
        type: 'GET',
        url: '/ajax/basic/m2.action',
        dataType: 'json',
        success: function(obj) {
            $('#m2').text(obj.seq + ', ' + obj.name + ', ' + obj.address);
        },
        error: function(a, b, c) {
            console.log(a, b, c);
        }
				
    });
});

 

  3) Controller (AjaxController.java)

  - json 형식은 하나의 객체 내 여러개의 프로퍼티를 정리해 둔것인데 [ { "이름": "값" }, {}, {},... ] 형식으로 되어있다.

  - 이 형식을 어노테이션 ResponseBody가 알아서 수행을 해준다. 

@RequestMapping(value = "/basic/m2.action", method = { RequestMethod.GET })
@ResponseBody // UserDTO -> json 변환
public UserDTO m2(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {
    UserDTO dto = dao.getUser();
    return dto;
}

 

  4) DB작업 (AjaxDAO.java)

@Repository
public class AjaxDAO {

    @Autowired
    private SqlSessionTemplate template;

    public UserDTO getUser() {
        return template.selectOne("ajax.getUser");
    }
}

 

  5) 쿼리 작성 (ajax.xml)

  - 임시로 seq 번호는 1번을 두도록 하자.

<select id="getUserName" resultType="String">
    select * from tblAjaxUser where seq = 1
</select>

 

- 결과화면

클릭 후 페이지가 깜빡임(새로고침) 없이 seq=1에 해당되는 지정한 컬럼값을 가져온걸 볼 수 있다.

 

[ 예제3. 데이터 가져오기(복합값 - 다중 객체) ]

- tblAjaxUser 테이블에서 전체 내용을 가져오기

  1) JSP (basic.jsp)

<h2>데이터 가져오기(복합값 - 다중 객체)</h2>
<div id="m3" class="alert alert-success"></div>
<div><input type="button" id="btn3" class="btn btn-default" value="클릭" /></div>

 

  2) Script (basic.jsp)

  - 버튼을 클릭하면 ajax가 독립 실행 되며, 지정해둔 프로퍼티 별로 실행이 된다.

  - 다중 객체를 받으므로 제이쿼리에서 사용하는 each문을 사용해서 하나씩 가져온다.

$('#btn3').click(function () {
			
    $.ajax({
				
        type: 'GET',
        url: '/ajax/basic/m3.action',
        dataType: 'json',
        success: function(list) {
					
            // ** 자바스크립트 forEach, 제이쿼리 each
            $(list).each(function(index, item) {
                $('#m3').append('<div>' + item.seq + ', ' + item.name + ', ' + item.age + ', ' + item.address + ', ' + item.birthday +'</div>');
            });
					
        },
        error: function(a, b, c) {
            console.log(a, b, c);
        }
				
    });
});

 

  3) Controller (AjaxController.java)

  -  json 형식으로 넘겨줘야 하므로 @ResponseBody

  - 여기서 문제점이 json으로 받지만 여러개의 객체를 가져오기 떄문에 List형식으로 받와야한다. (List<UserDTO> 반환)

@RequestMapping(value = "/basic/m3.action", method = { RequestMethod.GET })
@ResponseBody
public List<UserDTO> m3(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {    UserDTO dto = dao.getUser();
    return dao.getList();
}

 

  4) DB작업 (AjaxDAO.java)

@Repository
public class AjaxDAO {

    @Autowired
    private SqlSessionTemplate template;

    public List<UserDTO> getList() {
        return template.selectList("ajax.getList");
    }
}

 

  5) 쿼리 작성 (ajax.xml)

<select id="getList" resultType="com.test.ajax.UserDTO">
    select * from tblAjaxUser order by seq asc
</select>

 

- 결과화면

클릭 후 페이지가 깜빡임(새로고침) 없이 tblAjaxUser 테이블의 전체 내용을 가져온걸 확인할 수 있다.

 

[ 예제4. 데이터 보내기(원자값) + 데이터 가져오기(복합값) ]

- 원하는 seq 번호를 입력 한 뒤 해당 내용을 출력 하기

  1) JSP (basic.jsp)

<h2>데이터 보내기(원자값) + 가져오기(복합값)</h2>      
<div id="m3" class="alert alert-success"></div>
<div><input type="text" id="seq3" placeholder="seq" class="form-control"/></div>
		
<div><input type="button" id="btn3" class="btn btn-default" value="클릭" /></div>

 

  2) Script (basic.jsp)

  - 버튼을 클릭하면 ajax가 독립 실행 되며, 지정해둔 프로퍼티 별로 실행이 된다.

  - 데이터를 넘겨줄 data, 데이터를 받을 dataType, success를 입력해준다.

$('#btn3').click(function() {
			
     $.ajax({
				
         type: 'GET',
         url: '/ajax/basic/m3.action',
         data: 'seq=' + $('#seq3').val(),
         dataType: 'json',
         success: function(dto) {
             $('#m3').text('seq: ' + dto.seq + ', name: ' + dto.name + ', age: ' + dto.age );
         },
         error: function(a, b, c) {
             console.log(a, b, c);
         }
				
    });
});

 

  3) Controller (AjaxController.java)

  - json 형식으로 넘겨줘야 하므로 @ResponseBody

  - 해당 seq를 받았으므로 매개변수에 String seq를 추가한다. 

@RequestMapping(value = "/basic/m3.action", method = { RequestMethod.GET })
@ResponseBody 
public UserDTO m3(HttpServletRequest req, HttpServletResponse resp, HttpSession session, String seq) {
    UserDTO dto = dao.getSeqUser(seq);
    return dto; 
}

 

  4) DB작업 (AjaxDAO.java)

@Repository
public class AjaxDAO {

    @Autowired
    private SqlSessionTemplate template;

    public UserDTO getSeqUser(String seq) {
        return template.selectOne("ajax.getSeqUser", seq);
    }
}

 

  5) 쿼리 작성 (ajax.xml)

  - 매개변수 타입(parameterType), 반환값 타입(resultType)이 존재하므로 지정하기

<select id="getSeqUser" parameterType="String" resultType="com.test.ajax.UserDTO">
    select * from tblAjaxUser where seq = #{ seq }
</select>

 

- 결과화면

클릭 후 페이지가 깜빡임(새로고침) 없이 입력한 seq=2에 해당 되는 내용을 가져온걸 볼 수 있다.

 

[ 예제5. 데이터 보내기(form) ]

- 해당 테이블의 컬럼값을 사용자가 직접 입력해 데이터에 추가하기

  1) JSP (basic.jsp)

  - form을 사용하지만 ajax를 사용할 예정이기 때문에 method와 action은 안쓴다.

<h2>데이터 보내기(form)</h2>      
<form id="form">
    <div><input type="text" name="name" id="name" class="form-control" placeholder="name" /></div>
    <div><input type="text" name="age" id="age" class="form-control" placeholder="age" /></div>
    <div><input type="text" name="address" id="address" class="form-control" placeholder="address" /></div>
    <div><input type="text" name="birthday" id="birthday" class="form-control" placeholder="birthday" /></div>
    <div><input type="button" value="클릭" id="btn" class="btn btn-default"/></div>
</form>

 

  2) Script (basic.jsp)

  - 값을 넘기는 작업이므로 type은 POST로 지정한다.

  - 넘겨줄 data에 serialize를 사용한걸 볼 수 있는데, "직렬화"를 의미하며 객체나 배열 등의 데이터를 하나의 연속된 문자열로 만드는 작업을 뜻한다. (url에 파라미터 값으로 넘길 때 name=홍길동&age=20... 와 동일한 개념이다.)

   - POST로 넘긴 추가, 수정, 삭제 작업의 결과를 1또는 0으로 반환해 alert창으로 확인한다.

$('#btn').click(function() {
			
    $.ajax({
				
        type: 'POST',
        url: '/ajax/basic/form.action',
        data: $('#form').serialize(),
        dataType: 'json',
        success: function(result) {
            if (result == '1') {
                alert('성공');
            } else {
                alert('실패');
            }
        },
        error: function(a, b, c) {
            console.log(a, b, c);
        }
				
    });
});

 

  3) Controller (AjaxController.java)

  - json 형식으로 넘겨줘야 하므로 @ResponseBody

  - 해당 UserDTO의 내용들(이름, 나이, 주소, 생일)을 받았으므로 매개변수에 UserDTO dto를 추가한다. 

@RequestMapping(value = "/basic/m6.action", method = { RequestMethod.POST })
@ResponseBody 
public int m6(HttpServletRequest req, HttpServletResponse resp, HttpSession session, UserDTO dto) {
    int result = dao.add(dto);
    return result; 
}

 

  4) DB작업 (AjaxDAO.java)

@Repository
public class AjaxDAO {

    @Autowired
    private SqlSessionTemplate template;

    public int add(UserDTO dto) {
        return template.insert("ajax.add", dto);
    }
}

 

  5) 쿼리 작성 (ajax.xml)

  - 매개변수 타입(parameterType) 존재하므로 지정하기

<insert id="add" parameterType="com.test.ajax.UserDTO">
    insert into tblAjaxUser (seq, name, age, address, birthday) 
        values (seqAjaxUser.nextVal, #{ name }, #{ age }, #{ address }, #{ birthday })
</insert>

 

- 결과화면

클릭 후 페이지가 깜빡임(새로고침) 없이 입력한 값이 테이블에 추가된 모습을 데이터 가져오기(복합값) 예제에서 확인할 수 있다.