質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4537閲覧

ajaxでの二重送信防止

maguzo

総合スコア57

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/08/18 08:09

編集2018/08/18 08:10

現在、ajaxでサーバーへ通信する際、2重送信をしないように以下のような設計にしております。

<div class="ques_btn" id="main_respo">送信</div> を押してサーバー側の処理へ移るのですが、同時に同タグに.completedが付されて、 pointer-events: none;が適用されるようにして防止を試みたのですが、 clickを連続すると複数会の処理がサーバーサイドで行われてしまいます。

buttonやinput(submit)は使用しない前提で、このコードで二重送信が防止できない
理由と、実際に実務上どのような方法でこれを実現すべきかをアドバイスいただけますでしょうか。

よろしくお願い申し上げます。

html

1<div class="ui form"> 2 <div class="field"> 3 <textarea class="main_textarea" name="main_respo" rows="2" placeholder="100文字以内でコメントすることができます" maxlength="100"></textarea> 4 </div> 5</div> 6<div class="btn_wrapper"> 7 <div class="ques_btn" id="main_respo">送信</div> 8 <div class="insert"></div> 9</div>

css

1.completed{ 2 pointer-events: none; 3}

javascript

1$(function(){ 2 $('#main_respo').on('click',function(){ 3 if($('input[name="radio"]:checked').val()!=undefined){ 4 $.ajax({ 5 type:'POST', 6 url:'server.php', 7 timeout:1000, 8 data:{ 9 text:$('.main_textarea').val(), 10 select:$('input[name="radio"]:checked').val() 11 }, 12 success: function(text){ 13 $('.insert').empty(); 14 $('.insert').append('<p style="color:#f77676;">'+text+'</p>').hide().fadeIn(1000); 15 if (($('.main_textarea').val()).length>4) { 16 $('#main_respo').addClass('completed');//送信ボタンのdisable化 17 $('#main_respo').text('送信済');//送信ボタンのdisable化 18 } 19 }, 20 beforeSend:function(){ 21 if (($('.main_textarea').val()).length>4) { 22 $('#main_respo').text(''); 23 $('#main_respo').append('<img style="width:20px;height:20px;vertical-align:middle;" src="bars.svg" />') 24 } 25 } 26 }) 27 } 28 }) 29})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

$('#main_respo').addClass('completed');//送信ボタンのdisable化 これが送信完了を待っているので送信途中であれば何度でもクリック可能ですね。
$.ajaxの前に書いてしまえばよいのでは。

投稿2018/08/18 08:16

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maguzo

2018/08/19 05:12

ありがとうございました。 無事解決できたので、御礼申し上げます。
guest

0

JavaScriptらしくいくのであれば、
JavaScriptの世界に「今送信していますよ」フラグの変数を宣言することで上手くいくでしょう。

JavaScript

1$(function(){ 2 var isPosting = false; // 適当に今ポストしていますよ的な変数を宣言 3 $('#main_respo').on('click', function(){ 4 if (isPosting) return; // 1行目でポスト中なら即return 5 if($('input[name="radio"]:checked').val()!=undefined){ 6 $.ajax({ 7 // 省略した元々のキー 8 success: function () { 9 isPosting = false; // 通信が終わったのでフラグをfalseに戻す 10 // 省略した元々の処理 11 }, 12 beforeSend: function() { 13 isPosting = true; // ポスト中ですよと指定 14 // 省略した元々の処理 15 }, 16 }); 17 } 18 }); 19});

投稿2018/08/19 05:06

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maguzo

2018/08/19 05:18

なるほど、
maguzo

2018/08/19 05:19

if (isPosting) return; ですでに値が格納されていてtrueならそこで処理を終了するという仕組みですね。 このような書き方がモダンなものなのでしょうか、いろいろ勉強になります。早速実践してみようと思います!
miyabi-sun

2018/08/19 05:25

if (シンプルな比較) return; この即刻returnで逃げる手法は、ガード節と呼ばれるテクニックです。 リーダブルコードという書籍に載っており、ネストが深くならず書きやすいという特徴があります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問