12月4日(木)1コマ目
今日、やったこと
- [REST API]価格帯で検索 追加
- [REST API]新規登録
今日のホワイトボード
[REST API]価格帯で検索 追加
画面を下図のように価格帯で検索できるように追加。
![]() |
| 図 価格帯で検索を追加 |
search.html
検索条件入力用<input>タグ、検索ボタンを追加。
search.js
価格帯で検索ボタンクリック時に、searchByPrice()関数呼び出し。
searchByPrice()関数にて、fetch()でAPIをリクエスト。
Controller.java
価格帯で検索するためのメソッドを追加。
2つの検索条件はクエリパラメータで受け取る。
[REST API]新規登録
新規登録はPOSTコマンドでリクエスト。
登録データはHTTPのボディ部にJSON形式で格納。
これに伴い、HTTPのヘッダ部にContent-typeにapplication/jsonを設定。
![]() |
| 図 POSTコマンド送信時のパケット |
画面は以下のとおり。
![]() |
| 図 新規登録用画面 |
update.html
update.js
fetch()でPOSTコマンドでリクエストするには、第2引数で指定する。
(デフォルトはGETコマンド)
また、ヘッダ部やボディ部も第2引数で指定。
Controller.java
以前、POSTコマンドリクエスト時に、HTTPのボディ部にJSON形式で格納されたデータを登録するメソッドを追加済み。今回はこれを使う。
次回は
登録機能の確認。
変更、削除機能を追加。


