✔ JQuery: Bild neu laden

[chuvak]

Ich habe eine Seite captcha.php, wo ich mit Hilfe der GD-Library ein zufälliges Captcha-Bild generiere und als PNG ausgebe (Header).
Dieses binde ich mit dem <img>-Tag auf der Seite form.php ein.
Jetzt möchte ich Klick auf einen Link nur dieses Bild neu laden, falls es nicht leserlich genug ist.
Dies möchte ich natürlich mit Ajax, evtl. auch mit JQuery machen. Leider bekomme ich das Neuladen nicht hin.

captcha.php:

<?php
function captcha()
{
header ('Content-type: image/png');
    $image = imagecreatetruecolor(110, 60);  
    $number= rand(1000,9999);

// ganz viel Code.....

    imagepng($image);
    imagedestroy($image);
}
captcha();
if(isset($_POST['action']))
{
    captcha();
    exit();
}
?>

form.php

<script>
$("a.reload").click(function(){
$.ajax({
  url: 'captcha.php',
    data: "action=ajax",
  success: function(data) {
  alert(data);
     $('#bild').html(data);
  }
});
});
</script>
<img id="bild" src="captcha.php" alt="captcha"  /><br><br><br>
<a href="#" class="reload">reload</a>

Wenn ich per alert(data) den Inhalt ausgebe, bekomme ich viele undefinierte Zeichen (das PNG-Bild), jedoch bekomme diesen Inhalt nicht an die richtige Stelle.

Hat jemand eine Idee?

 

[Sven Mintel]

Moin,

das ist kein Anwendungsfall für AJAX, du musst ja eigentlich nur das Bild neu laden, die Source des Bildes ist da wenig hilfreich.

Probiers mal so:

<script>
$("a.reload").click(function(){
$('#bild').attr('src','captcha.php?'+new Date().getTime());
});
</script>

 

[chuvak]

Heey, es funktioniet!
Wozu denn der Parameter?

Achja und wie übergebe ich dann die neue Zufallszahl an die Session, damit sie später ausgewertet werden kann?
Bräuchte ich nicht doch Ajax?

 

[Sven Mintel]

Wozu denn der Parameter?

Damit auch wirklich ein neues Bild geladen wird und keines aus dem Browser-Cache

Achja und wie übergebe ich dann die neue Zufallszahl an die Session, damit sie später ausgewertet werden kann?

Nö, nicht unbedingt.
Die Session müsstest du auch in der captcha.php starten, dann kannst du sie ja dort direkt füllen.

Zur Sicherheit, falls der Benutzer Cookies aus hat oder session.use_trans_sid OFF ist, noch folgende Änderung:

<script>
$("a.reload").click(function(){
$('#bild').attr('src','captcha.php?<?php echo SID;?>&'+new Date().getTime());
});
</script>

 

[Sven Mintel]

Noch eine kleine Anmerkung zu dem Captcha:

Es könnte mit der Session Probleme geben, wenn du dort nur den einen String speicherst.

Warum:
Es gibt Leute, die viel herumklicken, auch mal gerne mehrere Tabs offen haben.
Haben sie nun mehrere Tabs/Fenster offen mit einem Captcha drinnen, würden die Captchas in zuvor geöffneten Tabs/Fenstern ungültig werden.

Zu bevorzugen wäre daher folgende Variante:
In dem Formular mit dem Captcha erzeuge ein verstecktes Feld mit einer eindeutigen ID als Wert(bekommst du bspw. per [phpf]uniqid[/phpf])

Diese ID übergebe der captcha.php ebenfalls als Parameter.

In der Session kannst du die Strings dann nach folgendem Muster speichern:

$_SESSION['captcha'][$idDiePerGetKam]='StringDerImBildStand';

Beim Senden des Formulares kannst du dann anhand des versteckten Formularfeldes den korrekten String aus der Session fischen, jedes Formular hat sein eigenes Captcha und nichts kommt sich in die Quere