完成形がこちら

非同期通信(ajax)で投稿できるようにしている。
jsonファイルのコードがこちらになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$(function(){ function buildPost(post){ var html =`<div class="content"> ${post.text} ←ユーザーがフォームに入力した値を抽出して変数htmlに代入。 </div>` return html; } $("#new_post").on('submit',function(e){ ←投稿ボタンが押されたらイベント発火 e.preventDefault(); ←ページの読み込みをキャンセル。 var formData = new FormData(this); ←ajaxからコントローラに送るためthis(form全体の要素)で取得した要素を変数formDataに代入。 var url = $(this).attr('action'); ←ajaxにはurlも必要なので、要素のaction(/posts←HTTP)を取得して変数urlに代入。 $.ajax({ url: url, type: "post", data: formData, ←コントローラーへ送るためのそれぞれの形式を明記。 dataType: 'json', processData: false, contentType: false }) .done(function(post){ ←ajaxが通った時の処理メソッド var html = buildPost(post); ←buildPostメソッドを呼び出し。 $('.contents').append(html); ←帰ってきたデータをcontentsクラスにappendする。 $('#post_text').val('') ←append後はフォームから文字を消すように処理。 }) .fail(function(){ ←ajaxが通らなかった時のエラー文 alert("エラー") }) }); }); |