JS GoogleMap 〜既存ソースの修正〜

イントロダクション

前回、GoogleMapのJavaScript APIの使い方について触れました。

今回は、今迄に作成したソースに改修を加えます。

サンプル作成中のページはこちらです。

改修内容

「作成したSELECTボックスの値をDBに登録する。」です。
現状の画面は下のような感じです、表示するには「ログイン」を行う必要があります。

![](http://zenryokuservice.com/wp/wp-content/uploads/2019/08/スクリーンショット-2019-08-28-21.20.41-300x188.png)

#### 追加する処理
1. 作成したSELECTボックスの値を取得する処理
2. 取得した値をサーバー(PHP)に送信する処理(実際には値を設定するだけ)
3. ・JS(クライアントサイド)から送信した値を、サーバ(PHP)で受け取る
4. ・受け取ったデータをDBへの登録処理に追加する
### 具体的に
1. データ送信ボタンを押下した時に、SELECTボックスの値を取得する
2. 選択された値をAjaxでの送信するデータオブジェクトへ設定する
3. PHP.送信されたリクエストを取得、その時の項目を追加する
4. 追加した項目の値をSQL(登録処理)に追加する

以上のような処理を実装します。現状は下のような画面が表示されています。下のセレクトボックスは値を変更しても何も変わりません。
![](http://zenryokuservice.com/wp/wp-content/uploads/2019/08/スクリーンショット-2019-08-28-21.18.00-300x145.png)

### 現状の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に項目を追加します。
画面からテストがてらにデータ追加!キャプチャ取ったがよくわからないです。。。すいません。。。

![](http://zenryokuservice.com/wp/wp-content/uploads/2019/08/スクリーンショット-2019-08-28-21.51.29-300x14.png)

登録した結果は下のように表示されます。

![](http://zenryokuservice.com/wp/wp-content/uploads/2019/08/スクリーンショット-2019-08-28-21.52.50-262x300.png)

[対象のページはこちらです。](https://zenryokuservice.com/sample/js/SampleMap.html)

## まとめ
今回の改修作業は、以下の点を変更するものでした。
1. 画面の入力項目にカテゴリを追加する
2. Formでデータを送信するのでSELECTボックスに名前をつける
3. PHPで受信したデータを取得
4. SQLに項目を追加、パラメータも追加

他の処理は触りませんでした。下手に触ると。。。というのもありますが、せっかく作ったものですので、余計な改修はしたくありません。手間もかかるし。。。
つまり、設計をある程度ちゃんとやっておけば最低限の修正で済むし、作ったもの(コード)を長く使用できるというわけです。

でわでわ。。。



コメントを残す