学習記録

メモ投稿機能（フロント側）

メモ投稿機能 ... 非同期通信によりリロードせずにメモを投稿できる機能

【目的】

・非同期通信についてAjaxを理解する

・必要なコード・用語を覚える

【学習概要（実装について大まかに何をしたか）】

①送信ボタンをクリックした際のイベントハンドラーを定義

②クリックした際のリクエスを送信

【実装の手順】

前回の続きから

 ２．リクエストを送信する

２−４．投稿するメモの入力内容の情報を送信する

投稿するメモの内容はフォームに入力される

sendoを使用して情報を送信する

＜用語・コード＞

FormData ... フォームに入力された値を取得できる

　　　　　　new FormData(フォームの要素)：でオブジェクトを生成して引数にフォー

　　　　　　ムの要素を渡す

２−５．レスポンスがあった場合の処理を記述

①レスポンスを受けてからHTMLにメモの内容を描画する

②メモのレコードデータを取得する

③HTMLを描写する場所を指定する要素を取得

④入力したフォームは投稿後も残る（画面遷移しないため）ので削除する

⑤HTMLにid="content"を追記

＜コード・用語＞

insertAdjacentHTML ... 指定したHTMLなどを特定の要素に描写できるメソッド

　　　　　　　　　　　要素.insertAdjacentHTML("afterend", HTML)

　　　　　　　　　　　第一引数に要素のどこに描写するかを指定する

　　　　　　　　　　　第一引数　

　　　　　　　　　　　値　　　　　　　内容

　　　　　　　　　　　beforebegin　要素の直前に挿入

　　　　　　　　　　　afterend　　　要素の最後に挿入　

　　　　　　　　　　　afterbegin　　内部の最初の子要素の前に挿入

　　　　　　　　　　　beforeend　　内部の最後の子要素の後に挿入

　　　　　　　　　　　第二引数には描写するHTML自体を渡す。HTMLに変数を定義

　　　　　　　　　　　して変数を渡すことで保守性も上がる

⑥HTMLという変数を定義して、変数をHTMLに描写できるようにする

⑦HTMLのステータスが２００以外の時の処理を記述

＜コード・用語＞

list.insertAdjacentHTML("afterend",HTML) ... 要素listの直後に変数HTMLを挿入

formText.value = ""; ... フォームに入力されたままの文字を空白に上書きする

２−６．コントローラーのcreatアクションとJavaScriptの処理が重複を避ける

重複しているため同じ投稿内容が2回繰り返されるためe.preventDefault();で処理を停止させる

投稿ボタンを押すと非同期でJavaScriptの処理が行われフォーム内容が投稿される

更新するとコントローラーのcreatアクションによってフォーム内容が投稿される

＜用語・コード＞

preventDafalt() ... 標準されている(Defalut)イベントを阻止する(prevent)メソッド

　　　　　　　　 標準設定されているイベント　挙動

　　　　　　　　submitボタンでclickする　　　指定先のURLへ画面遷移

　　　　　　　　　　　　　　　　　　　　　　  データ送信

　　　　　　　　チェックボックスでClickする　チェックが入る