230706 select option 값 받아오기 [js]

보트·2023년 7월 6일
0

javascript

목록 보기
1/2

문제

게시글 등록하기 프론트엔드 작성

카테고리 옵션 선택하기(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에 저장까지 되지만 해당 카테고리가 없다는 오류 발생

profile
일주일에 한 번

0개의 댓글