(ajax, JSON) 게시판에 글 추가 기능 구현

게시판에 새 글 추가 기능 구현하기!

가장우선은 HTMl로 게시판 틀을 만든다!
자바스크립트로 insert 기능구현하기에 앞서....
그전에!
ajax랑 JSON 개념을 알아야한다

ajax란?

브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

JSON이란?

JavaScript Object Notation의 약자로, 브라우저와 서버사이에서 오고가는 데이터의 형식이다.

ajax랑 JSON에 개념은 정처기 시험에서 많이 나온다... 외워두기~!

다시..
자바스크립트로 insert 기능구현하기.로 돌아가면 ,

script> 
//자바스크립트로 기능구현
    $(document).ready(function() {
        $("#creatorForm").submit(function(event) { 
        //html form안의 값들이 이벤트가 되었을경우 아래로 처리진행
        
            event.preventDefault(); // 기본 form 제출 동작을 막는다

               var formData = {  
               // 입력받은 id,name,sub,유저id의 값은 담음
                    channel_id: $("input[name='channel_id']").val(),
                    channel_name: $("input[name='channel_name']").val(),
                    channel_sub: $("input[name='channel_sub']").val(),
                    user_id: $("input[name='user_id']").val()
                };

               
                $.ajax({
                    url: "/creator/insertcreator", // API URL
                    type: "POST", // HTTP 타입설정
                    contentType: "application/json; charset=utf-8", 
                    // JSON 형식으로 보내도록 설정하기
                    
                    data: JSON.stringify(formData), 
                    //위에입력받은 폼데이타를 json 형식으로 변환

                    success: function(response) {  // 성공 시, 
                        console.log("게시글이 성공적으로 등록되었습니다.");

                        // 여기에서 목록 페이지로 이동
                        window.location.href = "/creator/listcreator"; 
                    },

                    error: function(error) {   // 에러날때에는                        
                        console.error("게시글 등록에 실패했습니다.");
                    }  
                });
        });
    });
</script>

// 주석 내용를 읽어보자~!

느낀점: 자바스크립트가 너무 어렵다......... 자바보다 더.......