ajax

.ajax([done], [before])

フォームを送信した時に、マッチした全てのフォームを、 送信した時と同じaction、method、valueでajax送信するようにします。

このメソッドはフォームを送信せず、 (ユーザーからの.trigger()によって)フォームを処理するだけです。

パラメータ

done: function

リクエストが完了した時に呼び出される関数を指定します。 オプションです。
第1引数には、エラーがあれば、エラーが入ります。
第2引数は送信データです。 JSONであればJSONが入り、JSONでなければ文字列が入ります。
第3引数はリクエストのオブジェクトが入ります。

var done = function(err, body, xhr){};

before: function

リクエスト送信前に呼び出される関数を指定します。 複数データをリアルタイムで処理するのに便利です。 オプションです。

var before = function(xhr){};

.ajax(done, before);

戻り値

undefined。

返された値は使用しないでください。 (場合によっては、他処理のpromiseの可能性があります。)

例

ニュースレターをajaxで処理します。

u('.newsletter').ajax(function(err){
  if (err) return alert('Error');
  alert('Thank you for subscribing, awesome!');
});

実際にajaxを使って送信します。

u('form.edit').ajax(function(){ console.log('Sent!'); }).trigger('submit');

jQueryじゃダメなの？

このパターンはjQueryでとても一般的な手法だったので、 .ajax()を作成しました。

$('form').on('submit', function(e){
  e.preventDefault();
  $.post($(this).attr('action'), $(this).serialize(), function(data){
    alert('Done! Thanks, ' + data.name);
  }, 'json');
});

上記のような手法を何度も使用していたので、 これをデフォルトにしておけば良いことに気づきました。 Umbrellaの場合、同様の処理を以下のように書きます。

u('form').ajax(function(err, data){
  if (!err) alert('Done! Thanks, ' + data.name);
});

もちろんこの書き方に強制力は無く、以下のようにjQueryと同様の指定方法も可能です。 しかし、今回の処理の場合、少し無意味だと思います。

u('form').on('submit', function(e){
  e.preventDefault();
  var options = { method: u(this).attr('method'), body: u(this).serialize() };
  ajax(u(this).attr('action'), options, function(err, data){
    if (!err) alert('Done! Thanks, ' + data.name);
  });
});

デモ

"PUSH"ボタンを押すと、console.logに'Done! Thanks, Umbrella!!'と出力します。

JavaScript

u('#demo').ajax(function(err, data){
  if (!err) console.log('Done! Thanks, ' + data.name);
});

HTML

<form id="demo" action="../json/data.php" method="POST">
  <button type="submit">PUSH!!</button>
</form>

PHP

<?php
header('Content-Type: application/json');
echo json_encode(array('name' => 'Umbrella!!'));
exit;

関連項目

ajax() ajaxリクエストを処理します。