GET 과 POST를 요청하는 API와 그를 확인하는 Ajax코드로 연습을 해보자

GET API

통상적으로 데이터 조회를 요청할 때 사용한다. 먼저 API 요청을 확인하는 Ajax코드부터 만들어보자.

$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다",
data: {},
success: function(response){
console.log(response)
}
})

해석하면 /test 페이지에 title_give=봄날은간다 라는 데이터조회 해볼거다. 만약 success가 된다면 그쪽에서 보내는 response를 출력해볼 것이다.

그럼 /test를 만들어야 이 코드가 작동할 것이다.
app.py에서 페이지를 만들었으니 거기로 이동해서 /test를 만들자.

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

title_receive로 니가 보낸 title_give데이터를 가져올거다.
가져오고 나서 그거 print 함 해볼거고, 그다음에 jsonify한 데이터를 너한테 보내줄거란다(이것이 Ajax에서 response가 된다).

자 그럼 실행을 해보자.

버튼을 누르면 콘솔에 jsonify한 데이터가 출력되고
pycharm의 터미널 화면에서는

위와 같이 Ajax에서 title_give에 부여한 "봄날은간다"라는 데이터가 API의 print(title_receive)로 인해서 출력이 된것이다.

POST API

그럼 이번에는 POST 방식으로 요청해보자.
POST는 데이터를 생성, 변경, 삭제를 위해서 사용된다.

전과 같이 Ajax 부터 구현한다.

      $.ajax({
                type: "POST",
                url: "/test",
                data: {title_give: '봄날은간다'},
                success: function (response) {
                    console.log(response['msg'])
                }
            })

/test에데가 데이터 보낼건데 데이터가 {title_give: '봄날은간다'} 이거고 너 할거 다한담에 됐으면 response로 알려줘. 이번에는 너 보낸것중에서 'msg'만 콘솔에 띄울게

POST API도 구현해보자.

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '요청 수신 완료!'})

어 그래 title_receive에다가 니가 보낸 데이터 title_give 집어 넣었고, 혹시 모르니까 print 함 해줄게.
잘 받았니까 jsonify한 데이터를 보내줄게(response).

버튼 누르고 나서 데이터가 제대로 전송되고 난뒤, 요청수신 완료라는 'msg'값만 콘솔에 출력된 모습이다.
이와 동시에 pycharm 터미널 화면에는

Ajax에서 전송한 데이터의 내용이 출력된 모습이다.