JavaScriptの練習問題を通して2
昨日の続き
コントローラーの方でも、レスポンスをjsonで行うために
というところまで記載していました。
まずは
❌レスポンスをjsonで行うため
⇨○レスポンスをjsonという形式で返却する
この部分は、こういった書き方の方が正しい気がしたので、上記部分の訂正をしておきます。
ここからがいまいちピンと来なかったところになるので、思い出しながら、資料を見直しながら書いていこうと思います。
正常にレスポンスが返ってきた際に使用するのが、
onloadプロパティになります。
XHR.onload = () => {}
この中に記載するのが、テキストを投稿するアプリケーションなので、
テキストを投稿した際に、そのテキストの内容がブラウザに反映されるようにするための処理を記述します。
そこで使用するのが
responseプロパティ
const item = XHR.response.テキストの情報を抽出するためのキー
(今回はコントローラーのcreateにてjson:形式に変換しているキーと投稿されたテキストの内容が紐づいている)
を変数itemに入れ、
item内に格納されたメモの情報をもとにし、ブラウザに表示するためのHTMLを生成し、
const html = `・・・・`
変数htmlへ格納します。
この変数htmlをブラウザのどこに表示するのかを決めるのが
insertAdjacentHTMLメソッドで
これはHTMLをある要素の指定した箇所に挿入するものです。
<挿入したい要素名>.inserAdjacentHTML(挿入したい位置,挿入したいHTML)
挿入したい位置は
beforebegin(要素の直前)
afterbegin(要素内部の最初の子要素の直前)
beforeend(要素内部の最後の子要素の直後)
afterend(要素の直後)
とあり、挿入したいHTMLは今回、htmlとなる。
挿入したい要素名はまた
document.getElementById("・・・")
にて取得し、変数に入れておき、挿入したい要素名のところに入れる必要がある。
最後にテキストを投稿した際、テキスト入力欄に入力した文字が残らないよう
formの値を取得し(再度、document.getElementByIdを使用し変数へ格納)、その中身を空にするため
formの値を取得した変数.value = ""
とすることで、投稿した際のテキストがテキスト入力欄よりリセットされるようになる。
ここまで記述した内容が
XHR.onload = () => {}
の
{}内の中身となる。
正直ものすごく長いと思いました。
この後に、もしレスポンスに何か問題があったら、エラーメッセージを表示できるようにするための
if (XHR.status != 200)(⇦HTTPステータスコード) {
alert(・・・ )
return null
}
もXHR.onloadの
{}内に追記されます。
ここまでの説明も長かったですが、実際書いている途中で読んでるだけよりも少し理解できたような気がしました。(あくまで感覚ですが・・・)
