php - ページ全体ではなくキャプチャ画像のみをリロードする方法

Question

フォームにキャプチャ画像をリロードできないため、画像への書き込みが非常に明確でないか、読みにくい場合があります。

私はそれについて、ここやインターネットでよく読んでいますが、私の問題は、ほとんどの人が直面しなければならないように見えるものとは異なります. 実際、captcha.php というページでキャプチャ画像を作成し、contacts.php という別のページで、画像の書き込みと、captcha.php ファイルに渡すカジュアルな一意の文字列を作成します。私はセッションや Cookie を使用したくありませんが、代わりに検証と呼ばれるテーブルを持つデータベースを使用しています。これらすべてを PHP に変換すると、captcha.php には、文字列を取得する次のコードが含まれます。

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);  

try
    {
        $stmt = $pdo->prepare("SELECT * FROM validation WHERE url_key = ? AND expire_date > NOW()");

        $stmt->execute(array($_GET['token']));

        $row = $stmt->fetch(PDO::FETCH_ASSOC);          
    }
catch(PDOException $e)
    {
        echo "Error!: " . $e->getMessage() . "<br />";
        die(); 
    }       
etc.....

そして、私のcontacts.phpにはこれがあります：

 $url_key = sha1(uniqid(rand(), true)); 

    $captcha = random_string(4);

    try
        {
            $stmt = $pdo->prepare("INSERT INTO validation (id_validation, url_key, captcha, expire_date) VALUES ('', ?, ?, DATE_ADD(NOW(), INTERVAL 5 MINUTE))");

            $stmt->execute(array($url_key, $captcha));
        }
    catch(PDOException $e)
        {
            echo "Error!: " . $e->getMessage() . "<br />";
            die(); 
        }   

もちろん、contacts.php ページ全体ではなく、画像だけを更新する必要があります。Ajaxでそれができることは知っていますが、それについては十分な知識がありません。

私のcontacts.phpには、リーダーにキャプチャを表示するためのタグimgがあります。

 <img src="captcha.php?token=<?php echo $url_key; ?>" alt="" />

このように変更しようとしました：

  <img src="captcha.php?token=<?php echo $url_key; ?>" id="captcha" />
  <a href="#" onClick="return changeCaptcha('captcha')">Reload the image</a>

次に、head セクションに次の Javascript コードを配置します。

  function changeCaptcha()
{
    document.getElementById('captcha').src = 'captcha.php' +
     Math.floor(Math.random()*100);
}

しかし、まったく機能しません。リンクをクリックすると、キャプチャが完全に消えます。

私はこれを変更しようとしました：

   <img src="captcha.php?token=<?php echo $url_key; ?>" id="captcha" />
   <a href="#" onClick="return reloadImg('captcha');">Reload the image</a>

そして、新しい Javascript ファイルを使用すると、次のようになります。

  function reloadImg(id) {
   var obj = document.getElementById(id);
   var src = obj.src;
   var pos = src.indexOf('?');
   if (pos >= 0) {
   src = src.substr(0, pos);
  }  
  var date = new Date();
  obj.src = src + '?v=' + date.getTime();
  return false;
}

しかし、この方法でも機能しません。問題は - php echo $url_key; にあります。- これを処理する方法がわからないため。たとえば、これを行うことはできません：

  function changeCaptcha()
   {
    document.getElementById('captcha').src = 'captcha.php?token=<?php echo $url_key; ?>' +
    Math.floor(Math.random()*100);
}

また間違っているので。

何かアイデアはありますか？前もって感謝します。さよなら。