HTML(jQuery)でデータ追加

例「単純な単一テーブルへのデータ追加」をあらかじめ行ってデータベースにテーブルを作成し、エンドポイントを作成しておきます。

今回の例では、このエンドポイントに対してHTML(jQuery)からアクセスするアプリケーションを作成します。

具体的には、以下のフォームで値を入力し、データをデータベースに追加できるようにします。

ソース

Item Code: <input id="ItemCodeFormInput" type="text">
Item Name: <input id="ItemNameFormInput" type="text">
Item Description: <textarea id="ItemDescriptionFormInput"></textarea>
<input id="ADD" type="button" value="Add">

このフォームに対して以下のスクリプトを実行させます。

<script>
$(function() {
    $("#ADD").click(function() {      <jQueryのクリックイベント定義>
        jQuery.ajax(                  <ここからテンプレートを使用>
            "https://dbaassandbox.matsuesoft.co.jp/??????/proxyserver-ItemInfo-InsertSample2.php",{
                type: "POST",
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify({
                    "TOKEN": "??????",
                    "param_ItemInfo_ItemCode_insert": $("#ItemCodeFormInput").val(),    ← フォームから値を取得
                    "param_ItemInfo_ItemName_insert": $("#ItemNameFormInput").val(),    ← フォームから値を取得
                    "param_ItemInfo_ItemDescription_insert": $("#ItemDescriptionFormInput").val()    ← フォームから値を取得
                }),
                success: function(json_result){
                    if (json_result._status == "OK") {
                        // Success
                        alert("Success");
                    } else {
                        // Failed
                        alert("Failed");
                    }
                },
                error : function() {
                    // Internal Error
                    alert("Internal Error");
                },
                complete: function() {
                }
            }
        );                 <ここまでテンプレートを使用>
    });
});
</script>

送信部のほとんどはエンドポイントのページに表示されているサンプルそのままです。パラメータはフォームの値を設定しています。
フォームに値を入力して「Add」ボタンをクリックすると、データベースにデータが挿入されます。

ご覧になればわかるように、コードを書く必要があるのはクライアント側だけです。 サーバ側はクラウドに設定するだけで済みます。

このように、開発を劇的に簡略化することができます。

戻る