(Ajax)サーバにGET,POSTを要求する

GET、POSTを知る前に、まずAPIを簡単に知る

アプリケーションプログラミングインタフェースとは?
オペレーティングシステムまたはプログラミング言語が提供する機能を制御するために、

アプリケーションに使用できるインタフェース.
仮にレストラン-サーバー、ゲスト-クライアントの場合、注文可能な食べ物を要求された場合、キッチンで食べ物を顧客に伝える「店員」は「店員」と見なすことができるAPIである.

ではOpenAPIとは何でしょうか。

OpenAPIとは?

はその名の通り、オープンAPIである.NAVERやGoogleなどで収集した資料をアプリケーション設計に利用するサービスです.

ここまで簡単に知って、後で詳しく整理してアップロードしましょう.

GET/POST

GET→通常!データ照会要求時
例)ムービーリストの表示
→データ転送:URLの後ろに疑問符を付けてkey=valueに転送する
→例:google.com?q=ホッキョクグマ

POST→通常!作成、更新、削除を要求します.
例)会員加入、会員脱退、パスワード修正
→データ転送:非表示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の友達の値はそれぞれの変数に保存し、サーバーにパッケージして渡します.

上記の手順を実行すると、データベースにデータが表示されます。

次に、保存したデータをクライアントに表示します。

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」に戻します.

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、Mysql、Oracleなどについて議論しましたが、MongoDBが一番難しいようです.課題以外にも、自由に対応できるように多くの情報を参考にすべきだと思います.