Back/Python

Flask에서 Ajax 요청하기 POST 예제 - 북리뷰(book-review)

북리뷰 코딩 예제

 

일의 순서

1. 클라이언트와 서버 확인하기

(print나 console.log 등으로 확인)

2. 서버 만들기

3. 클라이언트 만들기

4. 완성 확인하기

 

서버쪽 app.py 상태

@app.route('/review', methods=['POST'])
def write_review():
    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']

    doc = {
        'title':title_receive,
        'author':author_receive,
        'review':review_receive
           } # 딕셔너리를 만들고
    db.bookreview.insert_one(doc)
			 # bookreview에 저장한다.

    return jsonify({'msg': '저장 완료!'})

 

예제 풀이

@app.route('/review', methods=['POST'])
def write_review():

 

 함수 write_reviews()가 /review 와 POST를 받을 때.

    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']

 

(title, author, review)_receive 의 변수를 정해준다.

그 변수는 각각 클라이언트의 (title, author, review)_give 에서 가지고 온다.

doc = {
        'title':title_receive,
        'author':author_receive,
        'review':review_receive
           }

받은 값으로 각각 title, author, review를 설정해준 doc라는 딕셔너리를 만든다.

    db.bookreview.insert_one(doc)

    return jsonify({'msg': '저장 완료!'})

bookreview라는 콜렉션에다가 doc를 저장해준다.

그 후 저장 완료! 라는 메시지를 띄우는데 이 메시지는 클라이언트가 받는다.

클라이언트쪽 예제

function makeReview() {
                let title = $('#title').val()
                let author = $('#author').val()
                let review = $('#bookReview').val()
                // 인풋박스는 이렇게 val() 해야 값을 가지고옴

                $.ajax({
                    type: "POST",
                    url: "/review",
                    data: {
                        title_give: title,
                        author_give: author,
                        review_give: review
                    },
                    // 지금 파이썬으로 보내는 값들.
                    success: function (response) {
                        alert(response["msg"]);
                        window.location.reload();
                })
            }

 

예제 풀이

function makeReview() {
                let title = $('#title').val()
                let author = $('#author').val()
                let review = $('#bookReview').val()

 

makeReview 함수가 선언되었을 때 ( 예제의 경우엔 '저장하기' 버튼 )

title, author, review의 변수를 만든다.

 

 

 

제이쿼리(JQuery)를 사용했기에 ID값을 불러 올 때는 양식인 $(' # ' )을 쓴다.

$('#title')

$('#author')

$('#bookReview')

ID 값은 <body>쪽에 <input type="text" id = "title"> 이런 식으로 되어있다.

$.ajax({
                    type: "POST",
                    url: "/review",
                    data: {
                        title_give: title,
                        author_give: author,
                        review_give: review
                    },
                    success: function (response) {
                        alert(response["msg"]);
                        window.location.reload();
                    }
                })
            }

 

 

서버쪽의 POST , /review 에 ajax 콜을 한다.

data: {
              title_give: title,
              author_give: author,
              review_give: review
                    },
success: function (response) {
                        alert(response["msg"]);
                        window.location.reload();
})
            }

서버 쪽의 (title, author, review)_give 에 date를 내려준다.

성공할 경우 서버 쪽에서 정해준 "msg"를 alert을 이용하여 띄워 준다.

"저장 완료!" 가 alert으로 뜬다.

 

 

'Back > Python' 카테고리의 다른 글

Ajax 기본 및 예제  (1) 2021.03.07
Flask jinja2, requests - args 활용 예제  (0) 2021.03.05
다음 뉴스 랭킹 크롤링(Crawling) 예제  (0) 2021.03.02
Python Flask, Ajax 활용 예제 - 링크 따오기  (1) 2021.02.23
Python, Ajax 활용 예제 - 좋아요 기능  (1) 2021.02.21