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」ボタンをクリックすると、データベースにデータが挿入されます。

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

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

戻る

ログイン当サイトのユーザ名(ID)でログイン
クイックログイン:Facebookのアカウントで即時ログイン(ログイン情報保持オプション:ON) / 新規登録


お問い合わせ

© 2016-2019 Matsuesoft Corporation