[jQuery]Ajax 예제

우리가 흔히 사용하는 자바스크립트의 문법을 단순화시켜주는 것이 jQuery입니다.

☞ jQuery는 자바스크립트 언어를 단순화할 수 있도록 설계된 자바스크립트 라이브러리입니다.

 

오늘 정리할 내용은 jQuery의 Ajax에 관한 것입니다.

---

Ajax

Ajax를 이용하면 페이지의 이동없이 데이터 교환 및 화면 갱신이 가능하다. 이를 비동기 처리라고 한다.

일반적으로 사용자가 어떤 요청을 했을 때 화면은 반짝이고 요청한 내용이 눈에 보이게 된다. Ajax를 이용하면 그런 과정이 생략되는 것이다. 우리가 사용하는 댓글 기능이 대표적인 예라고 할 수 있을 것 같다.

 

Ajax의 문법은 다음과 같다.

$.ajax({
    url: "",
    type: "",
    cache: ,
    dataType: "",
    data: "",
    success: function(data){
  
    },
    error: function (request, status, error){        

    }
});

• url : 요청 url을 의미한다.
• type : 데이터 전송방식. GET 또는 POST
• cache : 요청 페이지의 캐시 여부. false 또는 true
• datatype : 서버에서 받아올 데이터를 어떤 형태로 해석할 것인지. xml, json, html, script를 선택할 수 있다.
• data : 서버로 데이터를 전송할 때 사용한다. "name="+name 이런 형태로
• success : Ajax 통신에 성공했을 때 실행되는 이벤트.
• error : Ajax 통신에 실패했을 때 실행되는 이벤트. request, status, error로 에러 정보를 확인할 수 있다.

MVC1 형태의 간단한 예제를 만들어 보았다.

예제의 목적은 관리자가 게시판 글을 바로 수정할 수 있도록 하는 것이다.

 

( BoardDAO.java ) 서버단에서 먼저 게시글을 읽는 메소드를 만든다.

jsp 페이지를 하나 만들고 게시판 번호를 해당 메소드(read)로 보낸다.(이때 게시판 번호는 ajax가 실행되면서 넘겨준다)

그리고 받아온 게시판의 정보는 boardVO 객체안에 들어있을 것이다.

 

BoardDAO.java

/* 게시글 READ */
public BoardVO read(int b_no) {
    BoardVO boardVO = new BoardVO();
    
    try {
        con = dbConnect.getCennection();
        sql = new StringBuffer();
        sql.append(" SELECT b_no, b_type, b_title, b_content, b_cnt, b_user, b_ymd, b_file");
        sql.append(" FROM board");
        sql.append(" WHERE b_no = ?");
        
        pstmt = con.prepareStatement(sql.toString());
        pstmt.setInt(1,  b_no);
        
        rs = pstmt.executeQuery();
        if(rs.next()) {
            boardVO.setB_no(rs.getInt("b_no"));
            boardVO.setB_type(rs.getString("b_type"));
            boardVO.setB_title(rs.getString("b_title"));
            boardVO.setB_content(rs.getString("b_content"));
            boardVO.setB_cnt(rs.getInt("b_cnt"));
            boardVO.setB_user(rs.getString("b_user"));
            boardVO.setB_ymd(rs.getString("b_ymd"));
            boardVO.setB_file(rs.getString("b_file"));
        }
    } catch(SQLException e){
        e.printStackTrace();
    } finally {
        dbDisconnect.disconnect(con, pstmt, rs);
    }
    
    return boardVO;
}

 

( update_form.jsp ) 11번 라인을 보면 JSONObject가 선언되었는데, JSON은 Javascript Object Notation의 약자로 key와 value 타입으로 데이터를 표현하는 데이터를 주고받을 때 사용하는 데이터 형식이다. 그래서 JSON을 Map형태라고도 한다.

13번 라인부터 b_no, b_type, b_title, b_content, b_file, b_user는 key가 되고 boardVO.get으로 받아오는 각각의 정보가 value가 된다. 우리는 이 key를 이용해 데이터를 뽑을 수 있다.

 

update_form.jsp

<%@ page contentType="text/plain; charset=UTF-8" %>
<%@ page import="board.*" %>
<%@ page import="org.json.simple.*" %>

<%
BoardDAO boardDAO = new BoardDAO();

int b_no = Integer.parseInt(request.getParameter("b_no"));

BoardVO boardVO = boardDAO.read(b_no);
JSONObject json = new JSONObject();

json.put("b_no", boardVO.getB_no());
json.put("b_type", boardVO.getB_type());
json.put("b_title", boardVO.getB_title());
json.put("b_content", boardVO.getB_content());
json.put("b_file", boardVO.getB_file());
json.put("b_user", boardVO.getB_user());

out.println(json);
%>

해당 페이지 주소를 통해 게시판 번호를 보내보면 요렇게 데이터가 들어있다.

문자형은 ""(큰 따옴표)로 구분된다.

 

이제 ajax를 사용하여 데이터를 받아보자.

 

( list.jsp - ① ) 수정을 클릭하면 update_form 함수가 실행된다. 

( list.jsp - ② ) ajax 통신을 통해서 해당 게시판번호를 넘겨주고 json 형태로 되어있는 데이터들(게시글의 정보)을 받는다. 이 때 json 형태의 데이터를 뽑아내는 작업을 흔히 파싱한다고 한다.

 

list.jsp - ①

<tr>
  <td style="text-align: center"><%=boardVO.getB_no() %></td>
  <td style="text-align: center"><%=boardVO.getB_type() %></td>
  <td><a href="./read.jsp?b_no=<%=boardVO.getB_no()%>"><%=boardVO.getB_title() %></a></td>
  <td style="text-align: center"><%=boardVO.getB_user() %></td>
  <td style="text-align: center"><%=boardVO.getB_ymd().substring(0,10) %></td>
  <td style="text-align: center"><%=boardVO.getB_cnt() %></td>
  <td style="text-align: center">
       <button type="button" onclick="update_form(<%=boardVO.getB_no() %>)" class="btn btn-outline-danger">수정</button>
  </td>
</tr>

 

list.jsp - ② 

function update_form(b_no){
  $.ajax({
    url: "./update_form.jsp",
    type: "POST",
    cache: false,
    dataType: "json",
    data: "b_no=" + b_no,
    success: function(data){
      $('#b_no').val(data.b_no);
      $('#b_type').val(data.b_type);  
      $('#b_title').val(data.b_title);          
      $('#b_content').val(data.b_content);
      $('#b_file').val(data.b_file);
      $('#b_user').val(data.b_user);
      
      $('#btn_proc').html('저장'); 
      $('#btn_proc').off('click'); 
      $('#btn_proc').on('click', update_proc);      
    },
    
    error: function (request, status, error){        
        var msg = "ERROR : " + request.status + "<br>"
      msg +=  + "내용 : " + request.responseText + "<br>" + error;
      console.log(msg);              
    }
  });
}

 

( list.jsp - ② ) 위의 16번 라인을 보면 btn_proc라는 id를 가진 엘리먼트에 텍스트값을 바꿔주는 작업을 한다.

( list.jsp - ③ ) 아래 화면에서 글쓰기 버튼의 id가 btn_proc이다. 수정을 클릭하게 되면 해당 게시글의 정보가 입력되면서 "글쓰기" 버튼은 "저장"으로 변경되고 있다.(글쓰기 -> 저장) 또 on 함수로 이벤트를 바인딩을 시켜 저장 버튼을 클릭하면 update_proc 함수가 실행되도록 하였다.

 

 

list.jsp - ③

<div style="float: right">
   <button type="button" class="btn btn-outline-secondary" id="btn_proc" onclick=""></button> 
</div>
      
<div class="form-group">   
  <label for="type" class="col-md-1 control-label">분류</label>
     <div class="col-md-11">
       <input type='text' class="form-control input-md" name='b_type' id='b_type' value='' required="required" style='width: 45%;'>
     </div>
</div>  
      
<div class="form-group">   
  <label for="title" class="col-md-1 control-label">제목</label>
     <div class="col-md-11">
       <input type='text' class="form-control input-md" name='b_title' id='b_title' value='' required="required" style='width: 45%;'>
     </div>
</div>     
    
<div class="form-group">   
  <label for="content" class="col-md-1 control-label">내용</label>
     <div class="col-md-11">
       <textarea class="form-control input-md" name='b_content' id='b_content' rows='10'></textarea>
     </div>
</div> 

<div class="form-group">   
  <label for="file1MF" class="col-md-1 control-label">작성자</label>
     <div class="col-md-11">
        <input type="text" class="form-control input-md" name='b_user' id='b_user' value="" size='40' style='width: 25%;'>         
     </div>
</div>

 

이제 수정된 내용을 처리하는 함수를 만들었다.

 

( list.jsp - ④ ) update_proc()는 수정된 내용을 처리하는 함수이다.

7번 라인의 data를 보면 frm이라는 id의 엘리먼트를 serialize한다고 하는데 의미는 이렇다.

frm은 form 태그의 id(list.jsp의 form 태그)로 form 안에 있는 모든 엘리먼트의 값을 표준 형태의 쿼리 스트링으로 만들어낸다.

(예제에서는 소스를 부분별로 쪼개어 포스팅해서 form 태그가 보이지 않지만 테스트해보고 싶다면 form 태그를 선언하면 된다)

list.jsp - ④

function update_proc(){  
  $.ajax({
    url: "./update_proc.jsp",
    type: "POST",
    cache: false,
    dataType: "json",
    data: $('#frm').serialize(),
    success: function(data){      
      var str = '';
      var msgs = data.msgs; 
      for (var i=0; i < msgs.length; i++) {
        str += msgs[i];
      }
      alert(str);
      list();  // 목록 새로 고침
      init();  // 글쓰기 버튼으로 새로 고침   
    },   
    
    error: function (request, status, error){  
      var msg = "ERROR<br><br>"
      msg += request.status + "<br>" + request.responseText + "<br>" + error;
      console.log(msg);                    
    }
  });
}

 

( update_proc.jsp ) 위에서 날아온 쿼리 스트링은 이제 update_proc 페이지에서 처리가 된다.

request로 받은 각각의 변수들은 VO 객체의 데이터로 전달한다.

그리고 update 처리는 서버단에서 이루어진다.

update가 정상적으로 이루어지면 count는 1을 return한다.

 

update_proc.jsp

<%@ page contentType="text/plain; charset=UTF-8" %>
<%@ page import="board.*" %>
<%@ page import="org.json.simple.*" %>
<%@ page import="java.util.ArrayList" %>

<%
BoardDAO boardDAO = new BoardDAO();
JSONObject json = new JSONObject();
ArrayList<String> msgs = new ArrayList<String>();

int b_no = Integer.parseInt(request.getParameter("b_no"));
String b_type = request.getParameter("b_type");
String b_title = request.getParameter("b_title");
String b_content = request.getParameter("b_content");
String b_file = request.getParameter("b_file");
String b_user = request.getParameter("b_user");

BoardVO boardVO = new BoardVO();
boardVO.setB_no(b_no);
boardVO.setB_type(b_type);
boardVO.setB_title(b_title);
boardVO.setB_content(b_content);
boardVO.setB_file(b_file);
boardVO.setB_user(b_user);

int count = boardDAO.update(boardVO);
if (count == 1) {
  msgs.add("수정 성공.");
} else {
  msgs.add("수정 실패.");
  msgs.add("다시한번 시도해주세요.");
}

json.put("msgs", msgs);
out.println(json);

%>

 

 

( BoardDAO.java ) 서버단에서의 update 처리.

VO 객체를 받아 VO 안의 값을 쿼리로 날려준다.

 

BoardDAO.java

/* 게시글 수정 */
public int update(BoardVO boardVO) {
    int count = 0;
    
    try {
        con = dbConnect.getCennection();
        sql = new StringBuffer();
        sql.append(" UPDATE board");
        sql.append(" SET b_type = ?, b_title = ?, b_content = ?, b_user = ?, b_ymd = NOW(), b_file = ?");
        sql.append(" WHERE b_no = ?");
                             
        pstmt = con.prepareStatement(sql.toString());
        
        pstmt.setString(1, boardVO.getB_type());
        pstmt.setString(2, boardVO.getB_title());
        pstmt.setString(3, boardVO.getB_content());            
        pstmt.setString(4, boardVO.getB_user());            
        pstmt.setString(5, boardVO.getB_file());
        pstmt.setInt(6, boardVO.getB_no());
        
        count = pstmt.executeUpdate();
    } catch(Exception e) {
        e.printStackTrace();
    } finally {
        dbDisconnect.disconnect(con, pstmt);
    }
        return count;
}

 

결과를 확인해보자.

아래 리스트에서 게시글의 수정을 클릭하면 화면의 변화없이 빨간 영역에 해당 게시글 정보가 입력이 된다.

 

수정 버튼 클릭.

글쓰기 버튼이 저장 버튼으로 변경되었고 게시글 정보가 폼에 들어온 것을 확인.

 

 

수정에 성공하면 아래와 같이 alert창 안에 메시지를 확인할 수 있다.

 

 

리스트를 보면 게시글의 정보가 변경된 것을 확인할 수 있다.

 

 

 

---

피드백은 언제나 환영입니다 :)