(Ajax)서버에 GET, POST 요청

GET, POST를 알아보기 전에 먼저 API에 대해서 간단하게 짚고 넘어가보자

API(Application Programming Interace)란?

• 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
  ex) 레스토랑 - 서버, 손님 - 클라이언트 라고 가정했을 때 손님이 주문가능한 음식을 요청하면 그 음식을 주방에서 고객에게 전달하는 '점원' 이 '점원'이 API라고 보면 될 것이다.

그럼 OpenAPI는 무엇일까?

OpenAPI란?

• 말 그대로 개방형 API이다. 네이버나 구글 등 다양한 곳에서 수집한 자료를 응용 프로그래밍에 사용할 수 있게 제공하는 서비스이다.

여기까지만 간단하게 알아보고 추후에 더 자세히 정리해서 올리도록 하자

GET/POST

• GET → 통상적으로! 데이터 조회(Read)를 요청할 때
  예) 영화 목록 조회
  → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
  → 예: google.com?q=북극곰

• POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
  예) 회원가입, 회원탈퇴, 비밀번호 수정
  → 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

✨서버부터 만들고 클라이언트를 만드는 것이 편한 것 같다.

POST(Server)

@app.route("/mars", methods=["POST"])
def web_mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name':name_receive,
        'address': address_receive,
        'size': size_receive,
    }
    db.mars.insert_one(doc)

    return jsonify({'msg': '주문완료!'})

✔이름과 주소, 그리고 크기를 클라이언트에서 받아온다. (_give 에 담겨져 온다.)
그 후 insert_one을 통해 DB에 저장 후 return을 통하여 클라이언트에 Msg를 보내준다.

POST(Client)

let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()

    $.ajax({
         type: 'POST',
         url: '/mars',
         data: {name_give : name, address_give : address, size_give : size},
         success: function (response) {
              alert(response['msg'])
                    // document.getElementById("name").value="";           //확인 누르면 id가 name인 text 초기화
                    // document.getElementById("address").value="";        //확인 누르면 id가 address인 text 초기화
                    // document.getElementById("size").value="";           //확인 누르면 id가 size인 text 초기화
              window.location.reload()									   //F5
                }
          });

✔id값이 name, address, size인 친구들의 값을 각각의 변수에 저장 후 서버에 포장해서 넘겨준다.

위 과정을 진행하게 되면 DB에 데이터가 들어와있는 것을 보실 수 있다.

이제 저장되어 있는 데이터를 Client에서 확인해 보자

GET(Server)

@app.route("/mars", methods=["GET"])
def web_mars_get():
    order_list = list(db.mars.find({}, {'_id': False}))
    return jsonify({'orders': order_list})

✔post에 비하면 간단?하다.
{'_id': False}를 통해 MongoDB에서 내려주는 id값을 제외한 모든 값을 내려받아 변수에 저장하고 그 변수를 'orders'에 담아서 return 해준다

GET(Client)

 $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
        let rows = response['orders']
            for(let i = 0; i < rows.length; i++)
            {
                 let name = rows[i]['name'];
                 let address = rows[i]['address'];
                 let size = rows[i]['size'];

                 let temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${address}</td>
                                            <td>${size}</td>
                                         </tr>`

                 $('#order-box').append(temp_html)
            }
      }
});

✔'orders'에 담겨있는 모든 데이터를 출력해주는 코드이다.

여기까지 GET/POST 방법에 대해서 알아보았다.
그동안 Mysql, Mssql, Oracle 등을 다뤄봤지만 MongoDB가 제일 어려운 것 같다. 과제 이외에도 내가 자유자재로 다루기 위해선 많은 정보들을 서칭해야 할 것 같다.