오늘 배운 것

+연락처App 완성하기(3) 完

CRUD 완성하고 AJAX 사용해서 json타입으로 전송

$('.btn-add').click(function (e) {
    //제이쿼리 변수는 $로 시작 (제이쿼리로 선택한 객체)
    const $modal = $('#modal-add-update');
    // 모달안에 title-add-upd를 찾음
    $modal.find('#title-add-upd').text('새 연락처');
    $modal.find('form').attr('action', path + '/contact?cmd=post');
  });
  // add , update의 submit 버튼을 클릭 => 추가 또는 업데이트 (AJAX)
  $('#add-update').on('submit', function (e) {
    e.preventDefault(); //submit 동작 중지
    e.stopPropagation(); //이벤트 중지
    $('.btn-action').prop('disabled', true); //모달창 닫기중지

    $.ajax({
      type: 'POST',
      url: $('#add-update').attr('action'),
      data: $('#add-update').serialize(), //form의 입력한 내용을 문자열로 변환
      dataType: 'json', //data를 json 타입으로 변환
    }).done(function (data) {
      if (data.status) {
        //요청결과를 성공적으로 받음
        $('#modal-add-update').modal('hide'); //닫기
        location.reload(); //새로고침
        //console.log(data);
      }
    });
  });
  //테이블에서 수정 버튼 클릭시 => 모달창 (id로 그 연락처 내용을 채움)
  $('table').on('click', '.btn-edit', function (e) {
    const $modal = $('#modal-add-update');
    // 모달안에 title-add-upd를 찾음
    $modal.find('#title-add-upd').text('업데이트');
    $modal.find('form').attr('action', path + '/contact?cmd=update');

    $.ajax({
      type: 'POST',
      url: path + '/contact?cmd=edit',
      data: 'id=' + $(this).data('id'), //클릭한 객체의 id속성값
      dataType: 'json', //받을때 타입
    })
      .done(function (data) {
        console.log(data);
        if (data.status) {
          //요청결과를 성공적으로 받음
          $('#name').val(data.contact.name);
          $('#email').val(data.contact.email);
          $('#phone').val(data.contact.phone);
          // 히든타입의 id 입력창을 넣는다 이때 id도 입력됨
          $modal.find('form').append('<input type="hidden" name="id" value="' + data.contact.id + '">');

          $modal.modal('show');
        }
      })
      .fail(function (jqXHR, textStatus) {
        console.log(textStatus);
      });
  });
  //테이블에서 삭제버튼 클릭 => 삭제 모달창 생성
  $('table').on('click', '.btn-delete', function (e) {
    $('#frm-delete').find('input[name=id]').val($(this).data('id'));
  });
  //삭제할때(삭제모달의 form의 submit버튼을 클릭했을때)
  $('#frm-delete').submit(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('.btn-action').prop('disabled', true);

    $.ajax({
      type: 'POST',
      url: path + '/contact?cmd=delete',
      data: $('#frm-delete').serialize(), //폼태그 입력내용을 문자열로 변환
      dataType: 'json', //받을때 타입
    })
      .done(function (data) {
        if (data.status) {
          //성공시
          $('#modal-delete').modal('hide'); //모달창 닫기
          location.reload(); //새로 고침
        }
      })
      .fail(function (jqXHR, textStatus) {
        //실패시
        console.log(textStatus);
      });
  });

post 방식으로 전송받았지만 get으로 보내서 처리

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}

전송받은 데이터들을 CRUD하는 메소드

private void delete(HttpServletRequest req, HttpServletResponse resp) {
		int id = Integer.parseInt(req.getParameter("id")); //문자열 id를 정수 변환
		
		boolean isDeleted = contactDao.delete(id);
		
		if(isDeleted) {
			System.out.println("삭제 완료!");	
			new Json(resp).sendMessage(true, "연락처 삭제됨");
		}
	}

	private void update(HttpServletRequest req, HttpServletResponse resp) {
		Contact contact = new Contact();
		
		contact.setId(Integer.parseInt(req.getParameter("id")));
		contact.setName(req.getParameter("name"));
		contact.setEmail(req.getParameter("email"));
		contact.setPhone(req.getParameter("phone"));
		
		boolean isUpdated = contactDao.update(contact); //참이면 저장완료
		
		if(isUpdated) {
			System.out.println("수정 완료!");	
			new Json(resp).sendMessage(true, "연락처 수정됨"); 
		}

	}

	private void edit(HttpServletRequest req, HttpServletResponse resp) {
		int id = Integer.parseInt(req.getParameter("id")); //문자열 id를 정수 변환
		
		Contact contact = contactDao.find(id); //id로 연락처 객체 찾기
		if(contact != null) {
			System.out.println("찾기 완료!");	
			new Json(resp).sendContact(contact); //연락처를 상태와 제이슨 변환해 출력
		}
	}

	private void save(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		Contact contact = new Contact();
		
		contact.setName(req.getParameter("name"));
		contact.setEmail(req.getParameter("email"));
		contact.setPhone(req.getParameter("phone"));
		
		boolean isSaved = contactDao.save(contact); //참이면 저장완료
		
		if(isSaved) {
			System.out.println("입력 완료!");	
			new Json(resp).sendMessage(true, "연락처 입력됨"); 
		}
		
	}

수정버튼 클릭 시 edit 메소드 실행하여 클릭한 row의 id값을 DB에서 검색 후 해당 데이터를 Modal창에 출력

저장버튼 클릭 시 update 메소드 실행하여 DB에 저장

삭제버튼 클릭 시 delete 메소드 실행

json으로 변환하는 메소드(GSON 사용)

package utills;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import model.Contact;

public class Json {
	
	private ContactJson contactJson; //보낼 객체
	private Gson gson;				 //Gson라이브러리 객체
	private PrintWriter out;		 //출력 객체	
	private HttpServletResponse response; //응답 객체
	
	public Json(HttpServletResponse response) { //생성자 (response) => 응답으로 제이슨 출력
		contactJson = new ContactJson(); //객체 생성
		gson = new Gson();				 //객체 생성
		
		this.response = response;
		this.response.setContentType("application/json; charset=utf-8"); //응답 타입을 제이슨으로 설정
		
		try {
			out = response.getWriter(); //응답 out객체 생성
		}
		catch (IOException e) { //예외처리
			e.printStackTrace();
		}
	}
	//1. 연락처를 응답으로 보낼때 (수정 요청시 => 그 수정연락처의 내용을 응답으로 보내준다.)
	public void sendContact(Contact contact) {
		contactJson.setStatus(true); 	 // 상태 양호
		contactJson.setContact(contact); // 연락처 객체를 입력
		
		sendResponse(gson.toJson(contactJson)); // 입력된 상태와 연락처를 모두 제이슨으로 변환해서 출력 
	}
	//2. 메세지만 응답으로 보낼때 (입력,업데이트,삭제 등은 메세지로 성공 여부만 보낸다.)
	public void sendMessage(boolean status, String message) { 
		contactJson.setStatus(status);  // 상태 입력
		contactJson.setMessage(message); // 메세지 입력
		
		sendResponse(gson.toJson(contactJson)); //상태,메세지 제이슨 변환해서 출력
	}
	// 공통으로 출력 메서드
	private void sendResponse(String jsonData) {
		out.print(jsonData); 
		out.flush(); //혹시 남아있는 데이터 모두 출력(남아있는 내용이 없도록)
	}

}

gson 다운로드

https://mvnrepository.com/artifact/com.google.code.gson/gson

• 다운로드 받은 gson라이브러리를 WEB-INF/lib 폴더 안에 넣어서 사용