[항해99(7기)] 웹개발 종합반 4주차

Python Flask 라이브러리

 

POST/GET 요청

localhost:5000

index.html

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

버튼에 onclick="get" 속성을 추가한다. 따라서 버튼을 클릭하게 되면 localhost:5000/test?title_give="봄날은간다"로 이동한다.

 

app.py

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

를 설정하면전에는 localhost:5000/test을 입력하면 404에러가 발생했던 페이지가 이제는 에러를 발생기시키지 않는다.

url에서 받아온 title_give의 값인 봄날은간다 는 print 함수에 의해 Pycharm 콘솔창에 뜨며, json화 된 {msg: '이 요청은 GET!', result: 'success'}이라는 test_get()의 리턴값이 localhost:5000/test와 브라우저 콘솔창에 나타난다.

Pycharm 콘솔창

화성 땅 구매

화성 땅구매

function save_order() {
        $.ajax({
            type: 'POST',
            url: '/mars',
            data: {
                name: $('#name').val(),
                address: $('#address').val(),
                size: $('#size option:selected').val();
            },
            success: function (response) {
                alert(response['msg'])
            }
        });
    }

 DB에 접속하려는데 자꾸 pymongo.errors.ServerSelectionTimeoutError: ~ [SSL: CERTIFICATE_VERIFY_FAILED]~ 와같은 에러가 발생했다. print(doc) 구문을 사용해도 보내는 값에는 문제가 없었으니 결국은 db문제인데, connection url을 바꿔보기도 하고 별짓을 다했는데, 해결이 되지 않았다. 결국 2시간 이상 낭비하고 Slack에 질문을 하려하니 같은 오류로 고생하는 사람들이 많았다.

 오류 해결 방법은 아래 링크를 참조했다.

https://www.notion.so/FAQ-863c4b20c36944e29d405c7acd730ac2

[스파르타코딩클럽] 웹개발 종합반 - FAQ

function show_order() {
            $.ajax({
                type: 'GET',
                url: '/mars',
                data: {},
                success: function (response) {
                    alert(response['msg'])

                    let name = $('#name').val();
                    let address = $('#address').val();
                    let size = $('#size option:selected').val();

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

                    $('#list').append(table_html);
                }
            });
        }

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

$(document).ready(function () {
            show_order();
        });

        function show_order() {
            $.ajax({
                type: 'GET',
                url: '/mars',
                data: {},
                success: function (response) {
                    $("#order-list").empty();

                    let order_list = response['orders'];
                    
                    for(let i = 0; i < order_list.length; i++){
                        let name = order_list[i]['name'];
                        let address = order_list[i]['address'];
                        let size = order_list[i]['size'];

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

                        $("#order-list").append(table_html);
                    }


                }
            });
        }

app.py에서 보낸 return 값인 jsonify({'orders': all_orders})을 index.html의 show_order함수에서 let order_list = response['orders']; 변수 선언을 하고 처음에는 for문 내의 let name = order_list[i]['name']; ..에 인덱스 번호를 지정해주지 않은  let name = order_list['name'];.. 로 입력하여 undefine이 떴다. 인덱스를 지정해주는 것 잊지 말기.

function save_comment() {
        let name = $('#name').val();
        let comment = $('#comment').val();

jQuery값 가져온 후에 val() 하는 것 까먹음.