イントロダクション
前回は、GoogleMapのJavaScript APIの使い方について触れました。
今回は、今迄に作成したソースに改修を加えます。
改修内容
「作成したSELECTボックスの値をDBに登録する。」です。
現状の画面は下のような感じです、表示するには「ログイン」を行う必要があります。
#### 追加する処理
1. 作成したSELECTボックスの値を取得する処理
2. 取得した値をサーバー(PHP)に送信する処理(実際には値を設定するだけ)
3. ・JS(クライアントサイド)から送信した値を、サーバ(PHP)で受け取る
4. ・受け取ったデータをDBへの登録処理に追加する
### 具体的に
1. データ送信ボタンを押下した時に、SELECTボックスの値を取得する
2. 選択された値をAjaxでの送信するデータオブジェクトへ設定する
3. PHP.送信されたリクエストを取得、その時の項目を追加する
4. 追加した項目の値をSQL（登録処理)に追加する
以上のような処理を実装します。現状は下のような画面が表示されています。下のセレクトボックスは値を変更しても何も変わりません。
### 現状のJS
/** セットしたデータをPHPに送信する */
function postData() {
ajaxPost();
}
/** Ajax送信処理 */
function ajaxPost() {
xhr.open('POST', 'https://zenryokuservice.com/XXXXX.php', true);
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8"');
xhr. responseType = 'text';
xhr.onreadystatechange = recieveResponse;
// POSTデータを設定する
var data = createJSON();
console.log(data);
try {
xhr.send(data);
} catch(e) {
console.log(e);
}
}
/** POST送信するデータ(JSON)を作成する */
function createJSON() {
var data = new FormData(document.getElementById("mapData"));
return data;
}
よく見たら。。。formから直接送信データを作成しているようでした(笑)
つまり、SELECTボックスに名前をつけて、PHP側でそれを取得するようにしてやれば良いということです。
### 修正箇所
SELECTボックスの属性部分に name="categoryId" を追加します。
// 20190828
$statement->bindParam(":categoryId", $categoryId);
INSERT INTO テーブル名(追加項目名) VALUES(: categoryId)のようにSQLに項目を追加します。
画面からテストがてらにデータ追加！キャプチャ取ったがよくわからないです。。。すいません。。。
登録した結果は下のように表示されます。
[対象のページはこちらです。](https://zenryokuservice.com/sample/js/SampleMap.html)
## まとめ
今回の改修作業は、以下の点を変更するものでした。
1. 画面の入力項目にカテゴリを追加する
2. Formでデータを送信するのでSELECTボックスに名前をつける
3. PHPで受信したデータを取得
4. SQLに項目を追加、パラメータも追加
他の処理は触りませんでした。下手に触ると。。。というのもありますが、せっかく作ったものですので、余計な改修はしたくありません。手間もかかるし。。。
つまり、設計をある程度ちゃんとやっておけば最低限の修正で済むし、作ったもの(コード)を長く使用できるというわけです。
でわでわ。。。
