キャプチャ付きの複数のフォーム - Ajax 送信時のエラー

Question

問題： コメントページがあり、各コメントボックスに「返信」ボタンがあります。返信ボタンには jquery ライブ クリック バインドがあり、トリガーされると、ajax 経由で適切なコメント フォームが読み込まれます。通常のフィールドに加えて、各フォームにはキャプチャ入力も含まれています。フォームが正常に送信された後（またはそうでない場合）、次のようにキャプチャを更新します。

// submit triggered and form serialized
$.ajax({
 type: 'POST',
 url: myaction,
 data: serializedForm,
 cache: false,
 success: function(data, status) {
    //checks errors from server
    $servererr = $(data).find('.error_list');
    if($servererr.length === 0)
    {
      //flash success message...
      //refresh captcha
      $thisform.find('.captcha_img_refresh').trigger('click.refresh');
    }
    else {
       //flash the server errors and then refresh captcha         
      $thisform.find('.captcha_img_refresh').trigger('click.refresh');
    }
});

現在、同じページで 2 つの新しいコメント フォーム (f1 と f2) が開いています (それぞれ /post/f1 と post/f2 という 2 つの異なるアクションがあります)。f1 を送信しましたが、エラーは報告されませんでした。次に、2 番目のフォームに移動して有効な詳細をすべて入力すると、サーバーからキャプチャ エラーがスローされます (そのため、上記の else ajax ステートメントが実行されます)。Firebug は次のように表示します。

> //for first form
> POST http://mysite.com/post/f1 302 Found 111ms
> GET http://mysite.com/post/f1 200 OK 600ms
> 
> //for 2nd form
> POST http://mysite.com/post/f2 200 OK 800ms

なぜこのようなことが起こるのでしょうか?それ以外はすべて問題ないようです (JavaScript をオフにしてフォームを送信しても問題ありません)。

フォームHTML:

<form id="comment-form-<unique-number>" class="comment-form-new" action="/post/<separate-action>" method="post" style="">
 <p>Leave a comment:</p>
   <ul>
    <li>
     <textarea rows="10" cols="71" name="myform[text]" id="myform_text"></textarea></li>
    <li>
     <label for="myform_username">Name (required)</label>
     <input type="text" name="myform[username]" value="Anonymous" id="myform_username" /></li>
   <li>
      <label for="myform_email">Email (required)</label>
      <input type="text" name="myform[email]" value="" id="myform_email" />
   </li>

   <li>
    <label for="myform_captcha">Please enter code shown below:</label>
     <input type="text" name="myform[captcha]" id="myform_captcha" />
   </li>
   <li>
     <img id="captcha_img" src="/mysite/captcha/126263" alt="Captcha Image">
     <!-- this refreshes captcha -->
     <a class="captcha_img_refresh" id="captcha_img_refresh"><img src="/images/reload_original.png" /></a>
   </li>
   <input type="hidden" name="myform[comment_id]" value="10" id="myform_comment_id" />
   <li>
     <input type="submit" value="Submit" id="comment-form-submit" />
   </li>
</ul>

その他の情報： 各コメントフォームが読み込まれた後、通常のバインディング（ライブバインディングではなく）を送信します。各フォームの値はフィールドに入力されたとおりにシリアル化されて送信され、コンソール ログを通じて確認できます。私は Cryptographp ライブラリを使用しています (http://www.captcha.fr/) キャプチャ用。

解決策： 1 つのフォームを送信した後、ページ上のすべてのフォームのすべてのキャプチャを更新すると、一部のキャプチャにはエラー画像が表示されますが、これはもちろん、ユーザーが更新ボタンを再度クリックすることで修正できます。しかし、私はこの回避策以外の何かを探しています。

Answer 1

OK...さらにテストを行ったところ、何が起こっていると思いますか(間違っている可能性もあります):キャプチャ画像のリンク。次のようなものです。 /mysite/captcha/(乱数), 、おそらくフォームごとにサーバー上で 1 回生成されます。f1 をロードしてから f2 をロードすると、f2 のキャプチャ リンクがバックエンドに保存され、基本的に f1 のキャプチャ リンクが無効になります。したがって、f1 (まだ開いている) を送信すると、キャプチャは失敗します。だから私は（フロントエンドで）試してみることができると思います：

1. 一度に 1 つの返信フォームのみを許可する
2. キャプチャ リンクをキャッシュし、ユーザーが対応するフォームにフォーカスしたときにそれを再使用して画像を再生成します
3. 上記の回避策を使用してください

これを解決するバックエンドの方法はありますか?