前回は、Ajaxの用語解説と実装するに当たっての準備を説明しました！
Ajax実装に当たって以下の３つのセクションに分けたので、少しずつ理解して頂ければ幸いです！
➀Ajaxでリクエストを送る！
➁コントローラとjbuilderの準備をする！
➂レスポンスを処理して画面上に表示させる！
それではついにAjaxの実装に入っていきましょう！！！
➀Ajaxでリクエストを送る！
完成したコードから説明していきます！
$(function() {
$("#new_post").on('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
var url = $(this).attr('action');
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentData: false
})
})
});
◯上から順を追って説明していきます！
・$("#new_post").on('submit', function(e) {
フォームが送信された時にイベントが発火するように設定しています！
ここでの注意点はイベントの発火元は送信ボタンではなくて、フォーム全体の情報を送
りたいからフォームタグのIDを指定する！
・e.preventDefault
これはフォームが送信された時に、デフォルトだとフォームを送信するための通信がされてしまうので、デフォルトのイベントを止めてくれる役割がある！
・var formData = new FormData(this);
フォームの値を定数に代入している！
（this）の中身は("#new_post")です！
・var url = $(this).attr('action');
データを送信するためのURLを定数に代入！
attrは、("#new_post")から('action')属性を取り出すよ！という意味です！
・ajaxの記述
url: 情報を送りたいURL先！
type: RailsにおけるHTTPメソッドに当たるもの！
data: 送る情報！
dataType: 型！
processData: FormDataオブジェクトでデータを取得する場合に記載すると覚えればOK!
contentData: FormDataオブジェクトでデータを取得する場合に記載すると覚えればOK!
➁コントローラとjbuilderの準備をする！
今回は3つのファイルを編成していくので、まずは前セクションで記述をしたposts.jsから見ていきましょう！
$(function() {
$("#new_post").on('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
var url = $(this).attr('action');
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentData: false
})
.done(function(post){
})
.fail(function(post){
})
})
});
◯上から順を追って説明していきます！
・.done(function(post){
ajaxがうまくいった時に行われる処理をここの中に記述します！
・.fail(function(post){
ajaxが失敗した時に行われる処理をここの中に記述します！
続いて、コントローラの記述を確認していきます！
class PostsController < ApplicationController
def index
@post = Post.new
@posts = Post.all
end
def create
@post = Post.create(post_params)
end
private
def post_params
params.require(:post).permit(:text)
end
end
ここの記述は特に難しくありませんね！
しかしcreateアクションに対するテンプレートエンジンを用意する必要がある...
それがjbuiderです！
create.json.jbuiderファイルをviews/posts/ディレクト以下に作成しましょう！！！
json.text @post.text
・jsonに読み換える
@post.textをjson.textに読み換えている！（右から左）
➂レスポンスを処理して画面上に表示させる！
完成したコードから説明していきます！
$(function() {
function buildPost(post){
var html = `<div class="content">
${post.text}
</div>`
return html;
}
$("#new_post").on('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
var url = $(this).attr('action');
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentData: false
})
.done(function(post){
var html = buildPost(post);
$('.contents').append(html);
$('post_text').val('');
$('.form__submit').prop('disabled',false);
})
.fail(function(post){
alert('エラー');
})
})
});
◯順を追って説明していきます！
・function buildPost(post)
実際に挿入するHTMLの情報を定義している！
returnで結果を返してあげる！
・$('.contents').append(html);
挿入するHTMLの親要素を指定する！
contentではないことに注意！
・$('post_text').val('');
フォームが送信された時にフォームの中身をリセットする！
・$('.form__submit').prop('disabled',false);
Ajaxのデフォルトだと、一度送信ボタンを押すと二度目が効かなくってしまう...
それを解除している！
以上でAjaxの実装が完了です！！！
最初は構造を理解するのがなかなか大変でした、、、
大事なことは大まかな流れを掴み、作業しながらデバックをして確認していくことだと思います！
少しずつ慣れていきましょう！
それではご静聴ありがとうございました！
*まだまだ拙いので意見等ございましたらお気軽にコメントお願いします！