20201103 [오류해결] GET 방식과 POST 방식의 데이터 전달 차이

• 우리가 사용하는 API는 아래 적힌 모든 것을 미리 약속해두고 그대로 동작합니다.

1. 요청 정보 : 요청 URL, 요청 방식 (GET / POST /...)
2. 서버가 제공할 기능 : 예. 회원 데이터 조회(Read), 주문데이터 생성(Create) 등
3. 응답 데이터 : 응답 데이터 형식 (어떤 key 로 어떤 데이터를 줄지, 예. response['img'])

1. GET 방식에서 서버에 데이터 주기

• 프론트

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

셋째줄을 잘 보자! ?[변수명]=데이터, 형태로 데이터를 서버에 넘겨 주고 있다.

• 서버

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

request.args.get('title_give') 라는 메소드로 클라이언트에게서 데이터를 받아온다!

반면에, POST는 data: {}의 꺽쇠안에 데이터를 넣어서 서버에 전달해준다. 데이터를 전달하는 방식에 차이가 있는데, 나는 그냥 POST 하듯이 GET 메소드를 사용해서 오류가 났었다!

그리고, url로 변수를 넘겨줄때는 스트링+스트링 연산을 해서 넣어준다.

$.ajax({
                    type: "GET",
                    url: "/cafe?search_give="+search,
                    data: {},
                    success: function (response) {
                        alert("야호")
                        let cafes = response['cafe'];
                        for (let i = 0; i < cafes.length; i++) {
                            makeCard(cafes[i]["image_url"], cafes[i]["map_url"], cafes[i]["name"], cafes[i]["station"], cafes[i]["description"])
                        }
                    }
                })

이렇게 해주고, 백에서 request.args.get('search_give')로 받아주면 문제 해결! 아이고 행복해 튜터님 감사합니다 꾸벅꾸벅!!