ajax
更新日: 2018-09-10
.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リクエストを処理します。
© 2014 Francisco Presencia Released under the MIT license
このコンテンツはFrancisco Presencia(franciscop)によるUmbrella JSドキュメントを翻訳/改変したものです。