[Web] 게시판구현 3. 상세페이지 보이기

hyewon jeong·2023년 2월 15일
0

web

목록 보기
3/24

상세페이지 보여주기

🎈 전체목록에서 해당글 클릭시 상세페이지 이동

            // 전체조회
            function showNotice() {
                var settings = {
                    "url": "http://localhost:8080/api/managers/notices/check",
                    "method": "GET",
                    "timeout": 0
                };

                $
                    .ajax(settings)
                    .done(function (response) {
                        console.log(response);
                        let rows = response.data
                        for (let i = 0; i < rows.length; i++) {
                            let noticeId = rows[i]['id']
                            let number = i + 1
                            let title = rows[i]['title']
                            let createdDate = rows[i]['createdDate']

                            let temp_html = ` <tr>
                           <td>${number}</td>
                           <td><a href ="contactDe-Notice.html?${noticeId}">${title}</td>
                           <th>${createdDate}</th> 
                         </tr>`

                            $('#noticeList').append(temp_html)
                        }
                  
                    });
            }

게시판 전체페이지에서 , 해당 글 제목 클릭시

상세페이지로 이동

API에서 @Pathvariable 로 입력값을 받을 때

  <td><a href ="contactDe-Notice.html?${noticeId}">${title}</td>

입력값을 상세페이지에 보여주는 방법

$(document).ready(function(res){  //페이지에 가져온 값을 보여줄때 
var para = document.location.href.split("?"); //href  는 현 도큐먼트를 말함. ? 쪼개면 /{ }값을 받음 
console.log(para[1])
var settings = {

"url": "
[http://localhost:8080/t-exercise/selectboard/](http://localhost:8080/t-exercise/selectboard/)
"+para[1],// 이렇게 쓰면 @Pathvariable값을 받음 
"method": "GET",
"timeout": 0,
};

@RequestParam 으로 받을 때

형식 예

URL?keyword=" + $('#keywordInput').val(),
  // 검색창 조회
            function noticeSearch() {
                var settings = {
                    "url": "http://localhost:8080/api/managers/notices/check/keywords?keyword=" + $('#keywordInput').val(),
                    "method": "GET",
                    "timeout": 0
                };

                $
                    .ajax(settings)
                    .done(function (response) {
                        $('#noticeList').empty()
                        console.log(response);
                        let rows = response.data;
                        for (let i = 0; i < rows.length; i++) {
                            let number = i + 1
                            let title = rows[i]['title']
                            let createdDate = rows[i]['createdDate']

                            let temp_html = ` <tr>
                           <td>${number}</td>
                           <td>${title}</td>
                           <th>${createdDate}</th> 
                         </tr>`

                            $('#noticeList').append(temp_html)
                        }
                        alert("조회 성공");
                    });
            }

temp_html 안에 있는 { 변수 } 값에 온클릭과 같은 이벤트를 적용시

  • 에러남 . 아래와 같이 적용을 시켜줘야함
  • 부모.있는 버튼? 자식이벤트 버튼에 직접 온클릭을 적지 말고 버튼 네임만 적어서 저렇게 적용시켜줌
$('#t_exePosting').on("click", "button[name='enrollComment']", function()

게시판에 필요한 틀 HTML

profile
개발자꿈나무

0개의 댓글