HTML getPost구현하기 #3

제목 버튼을 누르면 번호 정보를 담아서 보내고

DB에서 번호에 맞는 정보를 가지고와서 게시글에 표현해야한다.

 

번호에 대한 정보를 URL에 담아 GET방식으로 번호를 넘긴다.

 

아래 코드안에 있는 onclick 부분이다. 

버튼을 클릭하면 getPost 함수에 _id 번호를 매개변수넘긴다.

 

function show_list() {
        // $('#append-box').empty()
        $.ajax({
            type: "POST",
            url: "show_list",
            data: {},
            success: function (data) {
                console.log(data)
                let html = '';
                for (let i = 0; i < data.length; i++) {
                    let _id = data[i]._id
                    console.log(_id)
                    html += "<tr><td>" + _id + "</td><td>" + `<button onclick=getPost(${_id})>${data[i].title}</button>` + "</td><td>" + data[i].name + "</td></tr>";
                }
                $('#data').append(html);
            }
        });
    }


    function getPost(_id) {
        $.ajax({
            type: 'GET',
            url: `/boardget?_id=${_id}`,
            success: function () {
                window.location.href = `/boardget?_id=${_id}`

            }
        })
    }

 

받은 번호를 이용해서 DB에서 조회하고 그 정보를 board에 담아서 board.html 에 넘겨준다.  

@app.route('/boardget', methods=["GET"])
def check():
    print(request.args.get('_id'))
    _id = request.args.get('_id')
    board = db.board.find_one({'_id': int(_id)})
    print(board)
    return render_template('board.html', board=board)

 

 

board.html로 이동이 되고  밑에 코드에서 board.title, board.comment에

제목과 내용이 들어가서 조회가 가능하게 구현되었다.

<form action="/comment_save" method="post" class="myboard">
  <h1>게시글</h1>
  <h1 id="numid" style="display: none">{{board._id}}</h1>
  <div class="mb-3">
    <label for="title" class="form-label">제목</label>
    <input value="{{board.title}}" type="text" class="form-control" id="title">
  </div>
  <div class="mb-3">
    <label for="comment" class="form-label">내용</label>
    <textarea class="form-control" id="comment" rows="10">{{board.comment}}</textarea>
  </div>
  <button onclick="board_modify()" type="button" class="btn btn-primary">수정</button>
  <button onclick="board_delete()" type="button" class="btn btn-primary">삭제</button>
</form>

 

 

 

 

 

출처 - 참고사이트

https://hyoje420.tistory.com/24

[HTML]GET & POST