게시글 등록하기 프론트엔드 작성
카테고리 옵션 선택하기(bootstrap5)
<div id="select-category" class="category">
<select id="categoryList2" class="form-select" aria-label="Default select example">
<option selected>카테고리</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
db에서 카테고리 옵션에 넣어줄 값 가져와 붙이기
$.ajax({
url: 'http://localhost:8080/api/category',
type: 'GET',
contentType: 'application/json',
headers: {
'Authorization': document.cookie // 클라이언트 쿠키의 값을 전달
},
success: function (response) {
let temp_htmls = '' +
'<option selected>카테고리</option>' +
'';
$('#categoryList2').empty();
response.forEach((a) => {
let categoryName = a['name'];
console.log(categoryName);
let temp_html = `
<option>${categoryName}</option>
`;
temp_htmls += temp_html;
});
$('#categoryList2').append(temp_htmls);
},
error: function () {
console.log('AJAX 요청 실패');
}
});
선택된 카테고리 값 request param으로 붙이기
(참고 : https://velog.io/@luna238/Javascript-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-%ED%98%B8%EC%B6%9C%EC%9A%94%EC%B2%AD%ED%95%98%EB%8A%94-fetch%ED%95%A8%EC%88%98)
let categoryName = document.getElementById('categoryList2').value;
$.ajax({
url: `http://localhost:8080/api/board?category=`+categoryName,
type: 'POST',
contentType: 'application/json',
headers: {
'Authorization': document.cookie // 클라이언트 쿠키의 값을 전달
},
data: JSON.stringify(data),
success: function (response) {
if (response.id) {
alert("게시글 등록 성공");
window.location.href = 'http://localhost:8080/main/board';
} else {
console.log('게시글 등록 실패');
}
},
error: function () {
console.log('게시글 등록 실패');
}
});
db에 저장까지 되지만 해당 카테고리가 없다는 오류 발생