ajax化の前知識
railsを学習している中で「javascriptを使ってボタンのajax化をする」という課題が出ました。
基礎の流れがよくわかってなかったので、ajax通信で変更する場所はどうやって決める？jqueryとかDOMとかどういうこと？というところがよくわからずに困ったので、
そういう状況の方の１歩になればと思って記事を書きます。
まず ajax化とは
通常の流れは↓サーバーとやりとり時間があるので、一旦画面が白くなるのが特徴。
①ブラウザからクリックなどでサーバーへリクエスト送信
②サーバー側で処理して場合によってデータ生成→サーバーへレスポンスを返す(htmlや画像)
③ブラウザ（表示）
ajax化...javascriptを使用して、画面の一部のみ変更することで画面移管せずに表示を変更することができる。
①ブラウザからクリックなどでサーバーへリクエストを送信（javascriptで必要な部分のみをリクエスト）
②リクエストが返ってくる間の待ち時間も操作が可能
③リクエストが返ってきたら必要な部分のみを変更するので画面は白くならない
ということができる技術のようです。
ちなみにajax通信を調べてて出てきた用語を調べて理解したこと↓
DOM...htmlのどこの部分を更新するかを指定している
JQuery...javascriptのライブラリ（なんのこっちゃ） →htmlのDOM操作とajax処理をjavascriptを使って簡単に記述できるようにしている便利な道具（的なイメージ）
なんとなくわかった気がする...
続いて、実際に組み込む方法をやってみます！
railsで実際に使用してみる(form_withでやります)
- どこの部分をajax化するか指定する
- jsファイルを作る
- jsファイルに記述して動作確認
1.どこの部分をajax化するか指定する
・状況
commentの_formから投稿する機能を作っている状況から、ajax通信を使ってみる。 formからsubmitした時にcommentコントローラーからcreateアクションに飛ぶように設定している。
今回は、form_withを使用するとします。
form_withでは通常の通信であればlocal: trueを指定しますが、ajax通信を使ったリクエストであれば、local: trueの記述は削除します
<%= form_with model: comment do |f| %> <%= f.label :body %> <%= f.text_area :body ,id: 'js-new-comment-body', %> <%= f.submit '投稿',class: 'btn btn-primary' %> <% end %>
上記のようなフォームを使用するとします（form_withの他のパラメーターは適当なのでご勘弁）
local: trueを削除することで「ajax通信を使うから、controller側に飛んだ後は'アクション名.js.erb'ファイルに飛んでね」と指示することができます。
2.jsファイルの作成
view/comments/create.js.erbというファイルを作成します。
createアクション内で使用しているredirect_toを削除します。
そうすることでcreate.js.erbに飛んでくれるようになります。
いよいよjavascriptを記述します！
3.javascriptを記述
例えば、create.js.erb内にこのような記述をするとどうなるか
$("#js-new-comment-body").val('hogehoge')
$("#js-new-comment-body")←この部分はどこを変更するかを指定しています。あらかじめview側でidを決めておく必要があります。
また、後からみてわかりやすいように頭にjsをつけておくと良いです。
.val('hogehoge')←この部分はどういう動作をさせるかを決めています。今回はvalで文字列をセットしています。''とすれば空欄を入れることもできます。
これでサイト側からコメントの投稿を行うと
↑こんな感じで投稿を押したらコメントは消えてhogehogeがコメント欄に入りました！
ページのリロードをするとコメントも入ったと思います。
- 流れ 投稿ボタンでデータがcontrollerに渡り、通常通りDBにコメントが保存される。
→アクションが終わるとcreate.js.erbが起動して、指定されたIDに指定された文字列が入った。（ページは更新されてないのでコメントは追加されない）
こんな感じでajax通信が出来ました。実際にはjavascriptでコメントを更新したり、削除したりすると思うので、下記のページを参考に入れてみてください！
