ブログ少しご無沙汰していました
本日はAjaxについて。
Ajaxについては１ヶ月少し前に初めて学んだ時はほとんど理解ができていませんでしたが
最近になってjQueryの基礎力がだいぶついた状態＆使うのが３回目くらいでやっと
おおよそが理解できるレベルになったので、記事にしたいと思います。
Ajaxの基本
JavaScriptファイル内で定義します。
例えばRailsでページをリロードせずに何かのデータを取得したい時など。
DBとの連携が必要ない非同期動作に関してはイベントの発火のみで対応できると思いますが、
検索バーの実装など、入力内容に応じてDBから引っ張ってくる値が変わる時には
イベントの発火＋Ajax通信が必要になってきます。
（単にDBから特定のデータを取ってきてJSファイル内で使用したい場合は
gonというgemがあるので、こちらを使うと良いと思います）
どう書くのか
基本構文は以下の通りです。
$.ajax({
//Ajaxの処理
})
.done(function() {
//成功した場合の処理
})
.fail(function() {
//失敗した場合の処理
});
おおよその流れとしては、
Ajax通信が走る→doneとfailでjsonによるデータ生成の成功時・失敗時の処理を振り分ける
という順番になります
今回はセレクトボックスのプルダウンが選択された場合にAjax通信を動かしたいので、
これをイベント内で定義していきます
$(document).on("change", "#category_id", function () {
var parentId = $(this).val();
$.ajax({
url: '/posts/child_category',
type: "GET",
data: { parent_id: parentId },
dataType: 'json'
})
.done(function(children) {
})
.fail(function() {
});
});
Ajaxの中身を詳しくみていきます
$.ajax({
url: '/posts/search',
type: "GET",
data: { parent_id: parentId },
dataType: 'json'
})
urlではAjax通信が走った時に呼ばれるアクションを指定しています。
この場合はpostsコントローラーのsearchアクションが呼ばれています
その下のtypeでHTTPメソッドを指定しています。
例えばツイートに対するコメントの投稿をAjaxによる非同期通信で実現する場合は
コメントの投稿＝createアクションを使用するので、この部分は
url: '/comments/create'
type: "POST"
になります。
ここのtypeは慣習的に大文字で表現するみたいです
次にこちらの部分
data: { parent_id: parentId }, //データの中身はdata{}を送信する
dataType: 'json' //データをjson形式で送信する
ここまでを総括すると、
$.ajax({
url: '/posts/search',
type: "GET",
data: { parent_id: parentId },
dataType: 'json'
})
Ajax通信をするよ
postsのsearchアクションに飛んでね
ちなみにこれはGETリクエストだよ
その時にコントローラーにjson形式でデータを一緒に送ってね
データの中身はparent_idだよ（直前で定義しているparentIdを左辺に代入）
このように、createアクションの時に非同期を実現したい場合など
既存のアクションをAjaxに使用することもできるし、
Ajax通信用にアクションを作ることも出来る、という事です
