むじんブログ ”3歩進んで2歩下がる”

37歳未経験からのエンジニア転職を目指す営業部長

学習のアウトプット(JavaScript5)

前回の続き。

短いが、一旦カリキュラムが空く予定なのでまとめ。

 

【preventDefault】

非同期通信の実装においては、ブラウザからのリクエストとJavaScriptからのリクエストが重複しないように

ブラウザからのリクエストのキャンセルを行う必要がある。

 

preventDefaultは、既定のイベントを無効化するためのメソッドで、上記のようなケースで用いる。(preventは「防ぐ」という意味)

 

submit.addEeventListener('click', (e) => {

  e.preventDefault();

と記述することで「投稿ボタンをクリックした」という現象を無効化できる。

(=クリックしたことによってブラウザからリクエストが送られることを防ぐ)

 

つまりこの処理によって、ボタンを押してもサーバーサイドへリクエストは送られないことになる。

このため、最終的にはJavaScript側でリクエストの送信を行う記述をしない限り

Railsの通常のリクエストは行われない。

 

(e)はaddEventListenerの第2引数として置かれているが、

イベントオブジェクトと呼ばれ、イベント発生時の情報を持っている。

(今回であれば「投稿ボタンをクリックした」というイベント情報)

※eはeventの頭文字で、慣用的にこの文字が使われているが、別の文字でも実装に問題は生じない。

 

---------------------------------------------------------------------------------

JSON形式でのレスポンス】

JSON形式でレスポンスを返すには、renderメソッドを用いてコントローラーのアクションに記述をする。

下記はその記述で、renderの後にjsonオプションを加え、postというキーで変数postを指定している。

これで、JSON形式で変数postをJavaScriptに送るという内容になる。

 

def create

  post = Post.create(content: params[:content])

  render json:{ post: post }

end