Rails以外でjquery-ujsを使う（ajax編）

あらすじ

jquery-ujsとはRuby on RailsについてくるJavaScriptのライブラリ。エレメントのdata-*属性にいろいろ書くだけでいろいろしてくれる。

詳しくはこちらから
JavaScript - Rails以外でjquery-ujsを使う(アンカークリック時にPOSTやDELETEする方法など) - Qiita

formをajaxで送信

formエレメントにdata-remote属性を付ける。

<form action="ajax.php" method="get" data-remote>
<input type="text" name="name" value="aaa">
<input type="submit" value="submit" data-disable-with="loading...">
</form>

フォームの入力内容がajax.phpにPOSTされる。応答が返るまでの間、submitボタンは無効となり、ボタンのテキストが"submit"から"loading..."に変わる。

ajaxのイベントは、data-remoteを付けたエレメントのajaxイベントとして受け取る。

<script>
$("form")
    .on('ajax:success', function (data, status, xhr) {
        console.log(data, status, xhr);
    })
    .on('ajax:complete', function (xhr, status) {
        console.log(xhr, status);
    })
    .on('ajax:error', function (xhr, status, error) {
        console.log(xhr, status, error);
    })
</script>

その他`ajax:(before|beforeSend|send|abort:required|abort:file)などのイベントがある。詳しくはこちらから

ajax · rails/jquery-ujs Wiki

form以外でajax

• select, input, textareaエレメントのchangeイベント
• a, buttonエレメントのclickイベント

などでもajaxを実行できる。この場合はdata-method、data-url(aタグの場合は不要)を指定する。data-paramsで追加のパラメータを指定できる。

<input type="text" name="name" data-remote
 data-url="ajax.php"
 data-method="post"
 data-params="foo=bar"
>
<a href="ajax.php" data-remote>link</a>

その他

• data-type$.ajax()のdataType
• data-cross-domain $.ajax()のcrossDomain
• data-with-credentials xhrFields: {withCredentials: true}