スパルタコード王の初歩的な開始4週間前の内容をjQueryで記録する(4-1~4-16)

flaskを使用し、jQueryを使用してHTTPリクエストを表示

ターゲット:受注ボタンによる受注リストの追加機能の作成
非常に重要な技術:HTTP request
ストリーム:
1)顧客側が注文書を記入した後、注文ボタンをクリックする.

2)ボタンのonclick関数が起動します.この関数はPOST法を用いてオブジェクト形式のデータをバックエンドで伝送する.

        function order() {
            const name = $('#order-name').val();
            let count = $('#order-count').val();
            let address = $('#order-address').val();
            let phone = $('#order-phone').val();
            // 주문하기 API 연결
          	$.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, count_give: count, address_give: address, phone_give: phone}, //여기서 백엔드로 전송!
                success: function (response) { // 성공하면
                    alert(response["msg"]);
                    window.location.reload();

                }
            })
        }

3)バックエンドのPOST方式は、フロントから送信された情報を受信して起動する.バックエンドは、オブジェクト形式のデータを抽出し、新しいオブジェクトとしてdbに格納する.

@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    count_receive = request.form['count_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name': name_receive,
        'count': count_receive,
        'address': address_receive,
        'phone': phone_receive
    }

    db.ordersjq.insert_one(doc)
    return jsonify({'msg': '주문 성공!'}) #성공 메세지를 프론트로!

4.5)バックエンドで成功メッセージを受信した場合、フロントエンドで成功部分を実行する.

        function order() {
            const name = $('#order-name').val();
            let count = $('#order-count').val();
            let address = $('#order-address').val();
            let phone = $('#order-phone').val();
            // 주문하기 API 연결
          	$.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, count_give: count, address_give: address, phone_give: phone}, 
                success: function (response) { // 성공하면
                    alert(response["msg"]); //응답의 메세지 알림
                    window.location.reload(); //창 새로고침

                }
            })
        }

4)ページはonclick関数のリフレッシュ関数によりリフレッシュされ,フロントreadyに掛けられたGET関数が起動する.(実際には実行されていますが、データベースにデータがある場合は結果が表示されます.)

        $(document).ready(function () {
			function order_listing() {
            // 주문목록 보기 API 연결

						$.ajax({
                type: "GET",
                url: "/order",
                data: {}, //여기서 백엔드와 통신!
                success: function (response) {
                    if (response['result'] == 'success') {
                        const orders = response['orders'];
                        for (let i = 0; i < orders.length; i++) {
                            const name = orders[i]['name'];
                            const count = orders[i]['count'];
                            const address = orders[i]['address'];
                            const phone = orders[i]['phone'];

                            const temp_html = `<tr>
                                                <th scope="row">${name}</th>
                                                <td>${count}</td>
                                                <td>${address}</td>
                                                <td>${phone}</td>
                                            </tr>`

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

5)バックエンドのGETメソッドが有効になります.データベースに格納されているすべての受注の情報をオブジェクトとして作成し、json形式で返します.

@app.route('/order', methods=['GET'])
def view_orders():
    orders = list(db.ordersjq.find({}, {'_id': False}))
    return jsonify({'result': 'success', 'orders': orders}) #다시 프론트 success로 전송!

6)すべての注文者の情報をドアに回し、フロントに結果を表示する.

結論:HTTP requestにより、クライアントとサーバが情報を交換できる.
重要なのは,アドレスとメソッドが一致すると,必要な情報を互いに交換することである.
なぜフラスコを使うのか、どんなメリットがありますか?
+)bs 4はパッケージをダウンロードできません.BeautifulSoup 4は受け入れられますが、他のパッケージは受け入れられます.なぜですか?