개요
이번 예제에서는 jQuery 및 AJAX를 사용하여 웹 기반 게시판을 구현하는 방법에 대해 알아보겠습니다. 게시판에는 게시글 작성, 수정, 삭제 기능이 포함되며, AJAX를 통해 비동기적으로 데이터를 서버에 전달하고 받을 수 있습니다.
준비물
- HTML 파일
- jQuery 라이브러리
게시글 작성하기
먼저, HTML 파일에 게시글 작성을 위한 폼을 추가해야 합니다. 폼은 게시글 제목과 내용을 입력받을 수 있는 필드로 구성됩니다. 폼을 작성한 다음, jQuery를 사용하여 폼이 제출되었을 때 AJAX 요청을 보내어 서버에 게시글을 추가할 수 있습니다.
HTML 파일
<form id="post-form">
<input type="text" id="title" placeholder="제목">
<textarea id="content" placeholder="내용"></textarea>
<button type="submit">작성</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#post-form').submit(function(e) {
e.preventDefault();
var title = $('#title').val();
var content = $('#content').val();
$.ajax({
url: '/add-post',
method: 'POST',
data: { title: title, content: content },
success: function(response) {
// 게시글 추가 성공 시 처리할 코드 작성
console.log(response);
},
error: function(error) {
// 오류 발생 시 처리할 코드 작성
console.log(error);
}
});
});
});
</script>
위 예제 코드에서는 폼이 제출되면 $('#post-form').submit() 이벤트 핸들러가 호출됩니다. 폼의 입력값을 가져와 AJAX 요청을 통해 서버에 전송합니다. 서버는 전달받은 데이터를 처리한 후 성공 또는 오류 응답을 반환합니다.
게시글 수정 및 삭제하기
게시글 수정 및 삭제는 마찬가지로 AJAX를 사용하여 비동기적으로 서버에 요청을 보내어 처리할 수 있습니다. 각 게시글은 고유한 ID를 가지고 있으므로, 수정 및 삭제 요청 시 해당 게시글을 서버에서 식별할 수 있습니다.
HTML 파일
<!-- 게시글 목록 표시 -->
<ul id="post-list">
<li data-post-id="1">
<h3>게시글 제목</h3>
<p>게시글 내용</p>
<button class="edit">수정</button>
<button class="delete">삭제</button>
</li>
<!-- 나머지 게시글들도 동일한 형식으로 표시 -->
</ul>
<script>
$(document).ready(function() {
// 게시글 수정
$('.edit').click(function() {
var postId = $(this).closest('li').data('post-id');
// AJAX 요청 보내서 수정 처리 후 화면 업데이트
});
// 게시글 삭제
$('.delete').click(function() {
var postId = $(this).closest('li').data('post-id');
// AJAX 요청 보내서 삭제 처리 후 화면 업데이트
});
});
</script>
위 예제 코드에서는 게시글 목록을 표시하는 부분에 게시글 ID를 저장하는 data-post-id 속성을 추가했습니다. 수정 및 삭제 버튼을 클릭하면 해당 게시글의 ID를 가져와 AJAX 요청을 보내어 서버에서 처리할 수 있습니다. 이후 서버 응답에 따라 화면을 업데이트하면 됩니다.
결론
이번에는 jQuery 및 AJAX를 사용하여 웹 기반 게시판을 구현하는 방법에 대해 알아보았습니다. 게시글 작성, 수정, 삭제 기능을 구현하기 위해 AJAX를 통해 서버와 비동기적으로 데이터를 주고받을 수 있습니다. 이를 통해 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.