06.01.2023 | Webentwicklung
JQuery AJAX Randomizer mit Exclude List

Gerade brauchte ich einen kleinen Randomizer für 365 Elemente. Das Problem – Ich brauche zusätzlich eine „Exclude List“ mit bereits verwendeten Elementen. Zunächst kommt erstmal die Ausgabe im Frontend mit einem AJAX Request via GET, der ein kleines PHP Script aufrufen soll.

Voraussetzung ist hier zwingend JQuery ab Version 2 (2.2.4) und für die Kosmetik optional Bootstrap (5.2.x) und Font Awesome in Version 5.15.4.

Frontend Ausgabe

<div class="randomizer text-center">
    <h2>Randomizer</h2>
    <div id="randomizer" class="mb-2 mt-2">
        <div class='badge text-bg-light pe-4 ps-4'><h1>?</h1></div>
    </div>
    <a href="javascript: randomize();"><i class="ms-3 fas fa-sync-alt"></i> Yehaa! Click 2 randomize this!</a>
</div>

<script type="text/javascript">
    function randomize() {
        $.post("ajax_randomizer.php", function(result){
            $("#randomizer").html(result);
        });
    };
</script>

Aufgerufen wird ein kleines PHP Script. Dort findet sich neben der generierten Zahl in der gewünschten Range (hier 1-365) auch die Exclude List, der bereits verwendeten Zahlen. Der Rückgabewert wird dann entsprechend im Frontend via JQuery ausgegeben.

ajax_randomizer.php (aufgerufen via AJAX Request)

<?php
    $exclude = [1, 3, 7, 303];
    $range = range(1, 365);
    $valid = array_diff($range, $exclude);
    shuffle($valid);
    echo "<div class='badge text-bg-light pe-4 ps-4'><h1>$valid[0]</h1></div>";
?>

Externe Ressourcen:

• Font Awesome
• Bootstrap
• Google CDN für JQuery
• JQuery Download (jquery.com)