まあ、すべてはタイトルにありますが、もう少し説明します:-)
私の Rails アプリには多くのフォームが含まれています (Ajax 化されているかどうかに関係なく)。
ユーザーがフォームを 2 回以上送信するのを防ぐために、Javascript を使用しています。
Ajax化されたフォームの私のシナリオがあります:
ここで、ユーザーが JavaScript をバイパスした場合に、サーバー側のコードを追加して、物事を本当にきれいに保ちたいと考えています。
助言がありますか？
オプション：disable_with => "PleaseWait..."を送信タグに追加できます。
私は 4 つのシナリオで 4 つの方法を使用しています。
stopImmediatePropagation を使用して、クリック イベントをターゲット DOM に追加します。
/**
* 防止按钮重复点击。
* NOTICE: #1 需要在作用点之前调用此方法 #2 stopImmediatePropagation 会阻止后面的所有事件包括事件冒泡
* @delay_duration 两次点击的间隔时间
*/
$.fn.preventMultipleClick = function (delay_duration) {
delay_duration = delay_duration || 3000;
var last_click_time_stamp = 0;
var time_duration = 0;
$(this).bind('click', function (event) {
time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0;
//console.debug("preventMultipleClick", last_click_time_stamp, time_duration);
if (time_duration && time_duration < delay_duration) {
event.stopImmediatePropagation();
} else {
//console.debug("skip preventMultipleClick~");
last_click_time_stamp = event.timeStamp;
}
});
};
ajax の beforeSend 属性を使用します。
/**
* 使用：
* 在jquery的ajax方法中加入参数:beforeSend
* 例如：beforeSend: function(){return $.preventMultipleAjax(event, 5000)}
*
* @param event
* @param delay_duration
* @returns {boolean}
*/
$.preventMultipleAjax = function (event, delay_duration) {
delay_duration = delay_duration || 3000;
var target = $(event.target);
var last_click_time_stamp = target.attr("_ajax_send_time_stamp") || 0;
var time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0;
//console.debug("preventMultipleAjax", last_click_time_stamp, time_duration);
if (time_duration && time_duration < delay_duration) {
return false;
} else {
//console.debug("skip preventMultipleAjax~");
target.attr("_ajax_send_time_stamp", event.timeStamp);
return true;
}
};
<%= f.submit "Save annotation", :disable_with => "Saving...", :class => "btn btn-primary", :id => "annotation-submit-button" %>
または: 無効にする: 仅仅対表单要素
<input type="submit" value="submit" />
<input type="button" value="button" />
<input type="image" value="image" />
これが宝石です：<a href="https://github.com/mlanett/redis-lock" rel="nofollow noreferrer">https://github.com/mlanett/redis-lock
Redis.current.lock("#{current_user.id}.action_name") do
# Some code
end
Redis のロックを使用して、ブロックを次のようなもので囲みます。
Redis.current.lock("#{current_user.id}.action_name") do
# Some code
end
これは私が使用している宝石です https://github.com/mlanett/redis-lock
これが私がすることです：
これは二重提出を防ぐことはできませんが、少なくとも2回目のコミットからの変更を防ぐことができます。つまり、ユーザーが2回目にフォームを送信すると、コードは送信されたトークンをデータベース内のトークンと照合し、一致しない場合はオブジェクトを更新しないでください。
これには、新しく作成されたオブジェクトの欠点もあります（つまり、ユーザーがそのようなコメントやsmthを作成したい場合）。ただし、この場合、同じユーザーからの作成時間間隔を確認し、たとえば5秒未満の場合は、オブジェクトが「作成」されないようにすることができます。
本当の提案ではありませんが (反対票があっても驚かないでしょう)、あなたのサイトは JS なしでも使用できますか? 通常の操作では JS を有効にする必要があるという適切なメッセージを彼に表示するのはどうですか。
これが役立つかどうかわからない：
サーバー側:
フォームの新規ロード時に、session['variable']=false を設定します //フォームがまだ送信されていないことを意味します。
フォームの送信時に、次を確認してください。
if session['variable'] == true
{
do nothing...
}
else
{
set session['variable'] = true;
//do submit logic here
}
1) 何かが起こっていること、リクエストが処理されていることをユーザーに知らせるために、何らかの移動インジケーターも表示すると便利です。多くの二重送信を排除する必要があります。
2) ユーザーが JavaScript を無効にしている場合、「ajax化された」フォームをどのように送信しますか? サイトが javascript なしで機能しなくなった場合は、ユーザーに通知するのがおそらく最善です ( Eimantasが提案するように)。
1 で何を意味するかを明確にするために、そのような指標の一例を編集します。
http://www.netzgesta.de/busy/