【PHP/jQury】ajaxで非同期処理を連続して行えない

PHP(CakePHP)とjQueryでコメント機能を作っています。
下記のようなコードで、formからpostされた内容を飛ばして、非同期処理を行い
class="testList"のarticle要素の一番下に送信したコメントの入ったElements(HTML)を挿入し、
リロードなしで送信したコメントが新しく表示されるようにしています。

ただ、連投しようとすると動かず、１度送信して再度コメントする場合にリロードが必要になります。
このような事が起きるのはなぜなのでしょうか？
また、どのように解決すればよいか、ご教授頂けますと幸いです。

よろしくお願い致します。

html
1            <script>
2                $("form").submit(function() {
3                    event.preventDefault(); // form側のPOSTをキャンセル
4                    var content = $('textarea[name="test"]').val();
5                    $.ajax({
6                        type : "POST",
7                        url  : "/example",
8                        data : {'test' : test},
9                        dataType : "text"
10                    }).done(function(data, textStatus, jqXHR){
11                        $(".testList article:last-of-type").after(data);
12                    })
13                });
14            </script>

　
【追記】コメント部分のHTMLです。送信した後、<article>〜</article>の部分が非同期で挿入されます。

html
1
2            <div class="testList">
3              <h2>コメント欄</h2>
4                  <article>
5                    <div class="test">
6                        <span class="postername">投稿者名</span>
7                      <p class="content">
8                        コメント内容
9                      </p>
10                    </div>
11                  </article>
12            </div>

行動規範の内容に同意します

回答2件

ベストアンサー

ご自身のコメントにあるようにformのイベント(submit含む)をキャンセルしてます。

javascript
1event.preventDefault(); // form側のPOSTをキャンセル

やりたいのはたぶんsubmitボタンの連打を防ぐことではないでしょうか？
でしたら、いったん画面をロックするか(画面全体が暗くなりグルグル回るアレ)、submitボタンを一時的に無効にすればよいでしょう。

javascript
1$.ajax({
2    type: 'POST',
3    url: '/example',
4    data:  {'test' : test},
5    dataType: "text",
6    beforeSend: function(){
7      //画面ロック開始
8    },
9    complete: function(){
10      //画面ロック終了
11    },
12    error: function(jqXHR, textStatus, errorThrown){
13      //エラー処理
14    },
15    success: function(data){
16        //正常処理
17    }
18});

投稿2017/10/30 03:05

ooeok

総合スコア469

smnsmn

2017/10/30 03:17

ご回答ありがとうございますmm >>submitボタンの連打を防ぐことなのですが、form側のpostを停止して、ajaxでpostを送信するためにこのようにしております。 (でないとform側のpostが発動してページが遷移してしまうため、こうするといいという記事を読みました) 連投がうまくいかないのは、postを止めているのが原因なのでしょうか？ jqueryはあまり扱ったことがなく、ajaxの仕組みの理解が浅く・・・

ooeok

2017/10/30 03:40 編集

あーなるほど。それだとたしかにsubmit走りますね。でしたらhtml側のinput submitを単なるボタンにしてsubmitしないようにすればokでしょう。 htmlのsubmitをこんな感じのボタンに差し替えます。 <button id="post">投稿</button> js側も > $("form").submit ↓ > $("button#post").click これにすると。

smnsmn

2017/10/30 08:52

丁寧にご回答くださりありがとうございますm(_ _)m buttonに変更したところ、うまく連投できるようになりました！ postを強制的に止めていたのがえいきょうしていたのでしょうか。 ajaxでクリックで非同期処理する場合はformではなくbuttonを使うようにします。また、もっと勉強していきたいと思います。ありがとうございました。

行動規範の内容に同意します