RailsではフォームのAjax化を機能として提供してくれるが、あえてそれを使わないパターンを試してみる
ポイントはcsrf対策向けの処理を自分で書かなければならないというところか
user_controller.rb
# POST /users
# POST /users.json
def create
@user = User.new(user_params)
respond_to do |format|
if @user.save
format.html { redirect_to @user, notice: 'User was successfully created.' }
format.json { render :show, status: :created, location: @user }
else
format.html { render :new }
format.json { render json: @user.errors, status: :unprocessable_entity }
end
end
end
user.html.erb
<form id="the-form" action="/users.json" method = "POST">
<input type="text" name="user[name]" value="">
<button>submit</button>
</form>
http://ginpen.com/2013/05/07/jquery-ajax-form/
を参考にAjaxの処理を追加。
CSRFトークンをページから読み取り追加してあげる。
users.js
jQuery(function($) {
$('#the-form').submit(function(event) {
// HTMLでの送信をキャンセル
event.preventDefault();
// 操作対象のフォーム要素を取得
var $form = $(this);
// 送信ボタンを取得
// （後で使う: 二重送信を防止する。）
var $button = $form.find('button');
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
var token;
if (!options.crossDomain) {
token = $('meta[name="csrf-token"]').attr('content');
if (token) {
return jqXHR.setRequestHeader('X-CSRF-Token', token);
}
}
});
// 送信
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize(),
timeout: 10000, // 単位はミリ秒
// 送信前
beforeSend: function(xhr, settings) {
// ボタンを無効化し、二重送信を防止
$button.attr('disabled', true);
},
// 応答後
complete: function(xhr, textStatus) {
// ボタンを有効化し、再送信を許可
$button.attr('disabled', false);
},
// 通信成功時の処理
success: function(result, textStatus, xhr) {
// 入力値を初期化
$('tbody').append(result.name);
},
// 通信失敗時の処理
error: function(xhr, textStatus, error) {}
});
});
});
