화성 땅 공동 구매라는 주제로 GET, POST 이용하기

이 주제를 하기 전 미리 말씀드립니다. html 형태는 1주차 내용처럼 부트스트랩을 이용하면 

충분히 만들수 있는 부분이고 스파르타코딩클럽 내에 코드이기때문에 코드 전체적인 부분은 제외하고

GET, POST 중점으로만 하겠습니다.

 

아마 이전에 올린 게시물 보다는 이해하시기가 편하실 겁니다.

 

먼저 POST 부분 부터 보여드리겠습니다. 

 

받아오는 값을 보여주기 위한 사진

일단 이름(name), 주소(address), 평수(size), 주문하기 버튼(함수 save_order()) 임을 미리 말씀드립니다. 

 

화성 POST Ajax 코드

화성 POSTAPI 코드

POST의 Ajax코드를 먼저 보시면 웹페이지에서 입력한 이름, 주소, 평수를 각각 받아와서 data를 각각의 _give 형태로 API 코드를 보내주었습니다. 

 

name_give : name, address_give : address, size_give : size -> POST API로 보냅니다.

 

그럼 그걸 받은 POST API는 각각 name_receive, address_receive, size_receive 변수에 선언을 해주고 그 선언한 변수들을 MongoDB에 넣기 위해서 Dictionary 형태로 바꿔준 다음에 넣어줍니다. 그리고 완료가 되었으면 jsonify 코드를 POST Ajax코드로 보내서 success 에 메시지가 뜨도록 해주고, 새로고침을 해줍니다.

 

MongoDB에 들어간 데이터

 

 

간단한 순서만 보면

 

Ajax 값 받고, API한테 넘겨주기 -> 넘겨받은 값을 DB에 저장후 API는 Ajax에게 메세지 보내기 -> Ajax는 메세지 출력

 

이번에는 GET부분을 보겠습니다.

 

넣어준 값을 보여주기 위한 사진

 

GET 쪽 Ajax 코드

GET 쪽 API 코드

GET를 보시면 GET API 쪽에서 DB 를 싹다 가져와서 Ajax코드로 orders라는 이름으로 넘겨줍니다. 그럼 Ajax 코드는

orders라는 값들은 받아와 rows 변수에 대입을하고 rows의 길이만큼 반복문을 돌면서 이름, 주소, 평수 를 다 꺼낸 후, 테이블 형태이니 <tr></tr> 부분을 가져와 대입하고 그걸 id가 order-box라는 tbody에 첨부하는 것입니다.

 

웹페이지에 나오는 결과 ( 홍길동, 임꺽정, 세종대왕은 html로 만들어 둔 것 )

 

MongoDB에 저장된 값

 

이전 게시글은 같은 내용을 가지고 GET, POST를 설명하느라 헷갈렸을수 있지만 이번에는 데이터가 넘어가고 받아오고 하는 코드를 넣어서 조금 이해하기 쉬워지셨을 겁니다.

 

py파일의 코드만 올려놓도록 하겠습니다.

 

py파일 전체 코드