非同期通信実装

ポートフォリオ作成を始めて、コメント機能に対して非同期通信の実装が完了！

コメントフォームの親要素に対してid、text入力フォームに対してclass、inputbtnに対してclassをそれぞれ入れる。

Why：上記の要素を追加しないとComment.jsファイルの中に処理の内容を書き込むのに必要。

例：jsファイル内のソースコード

$('#new_comment').on('submit', function (e) {
e.preventDefault();
var formData = new FormData(this);
var url = $(this).attr('action')
console.log(url)
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentType: false
})
.done(function (data) {
var html = buildHTML(data);
$('.comments').append(html);
$('.textbox').val('');
$('.form__submit').prop('disabled', false);
})
.fail(function () {
alert('error');
})
})
});

$('#new_comment').on('submit', function (e) {のnew_commnetというのが非同期通信の処理を実施したい要素に当てる感じ。

今回はコメント機能のコメント入力欄の内容を送信ボタンを押下した時にjsonデータとしてクライアントに返したいので、new_commentというidをコメント機能のフォーム全体の要素に追記してあげる必要があった。

※上記コードの意味はnew_commentのsubmitボタンを押下するとイベントが発火する。。という意味になる。

new_commentではなく送信ボタンの要素を入れたら良いのでは？と思う方もいるかもしれないがイベントを発火するにあたり送りたい情報はコメント入力欄の中身なのでコメントフォーム全体に対する要素を入れてあげる必要がる。

e.preventDefault();　url遷移やボタンクリック時の挙動などのデフォルト設定となっている状態を解除する（手動にする感じ）

var formData = new FormData(this);
var url = $(this).attr('action')

FormDataというのがコメント入力欄に入力した内容やuser.idだったり投稿idなどの情報（console.logだと配列で表示されている部分）と、action（今回だとコメントした投稿画像に対するid）をurlとして代入している。

長くなってしまうので以降の構文の意味は省くが、構文１つ１つの意味を考えながらコーディングをしていくことでロジックへの理解度が上がる気がします。

ちなみに非同期通信の動作確認において、404エラーが出た場合urlの中身が間違っている可能性があるので注意。