jQuery implementiert einen Click-Switching-Bestätigungscode-Front-End-Fragen und Antworten-php.cn

jQuery implementiert einen Click-Switching-Bestätigungscode

PHPz

Freigeben： 2023-05-11 22:16:35

Original

727 Leute haben es durchsucht

Mit der rasanten Entwicklung des Internets sind Verifizierungscodes zu einem unverzichtbaren Bestandteil geworden. Unabhängig davon, ob Sie sich registrieren, anmelden oder eine Bestellung aufgeben, müssen wir den korrekten Bestätigungscode eingeben, um fortzufahren. Heutige Verifizierungscodes bestehen nicht mehr aus einfachen Zahlen oder Buchstaben, sondern aus komplexeren Verifizierungscodes mit Bildern, Schiebereglern und anderen Interaktionen.

Bei der Website-Entwicklung ist auch die Implementierung der Verifizierungscode-Funktion zu einem wesentlichen Bestandteil geworden. Allerdings sind die Verifizierungscodes einiger Websites zu komplex und müssen ständig aktualisiert werden, was zweifellos ein schwerer Schlag für die Benutzer ist. Wie kann also das Benutzererlebnis durch die Implementierung des Bestätigungscodes verbessert werden? Hier möchte der Autor eine Methode zur Verwendung von jQuery zur Implementierung von Click-to-Switch-Bestätigungscodes vorstellen.

Wir können jQuery verwenden, um den Effekt des Klickens zum Wechseln des Bestätigungscodes zu erzielen. Dies ist sehr einfach und leicht zu verstehen. Zuerst müssen wir wissen, was ein Verifizierungscode ist. Der Verifizierungscode ist eine Technologie, die verhindert, dass Roboterprogramme menschliches Verhalten simulieren. Er besteht normalerweise aus einer Folge von Zahlen und Buchstaben sowie einem Bild. Der von uns verwendete Verifizierungscode besteht hier aus einem Bild und einem Texteingabefeld.

Das Folgende ist die Code-Implementierung. Wenn Sie mit jQuery nicht vertraut sind, können Sie zunächst die Grundlagen von jQuery erlernen.

HTML-Code:

<!DOCTYPE html>
<html>
<head>
    <title>点击切换验证码</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="captcha" style="display: inline-block;">
        <img id="captchaImg" src="captcha.php" onclick="changeCaptcha()" />
    </div>
    <input type="text" id="captchaInput" />
    <button id="submitBtn">提交</button>
</body>
<script>
$(function(){
    $('#submitBtn').click(function(){
        alert('验证码输入正确！');
    });
});
</script>
</html>

Nach dem Login kopieren

Im HTML-Code definieren wir ein Div mit der ID captcha, das ein IMG-Tag mit der ID captchaImg und ein Eingabe-Tag mit der ID captchaInput enthält. und eine Schaltfläche zum Senden. Unter diesen ist captchaImg das Bild des Bestätigungscodes und captchaInput der vom Benutzer eingegebene Bestätigungscode. Als nächstes müssen wir die Funktion zum Klicken zum Wechseln des Bestätigungscodes implementieren.

JavaScript-Code:

function changeCaptcha() {
    $('#captchaImg').attr({
        src: 'captcha.php?' + Math.random()
    });
}

Nach dem Login kopieren

Im JavaScript-Code aktualisieren wir den Bestätigungscode, indem wir das src-Attribut des Bildes ändern. Beachten Sie, dass wir nach der URL eine Zufallszahl hinzugefügt haben, um Caching-Probleme zu vermeiden, die dazu führen würden, dass das Bild des Bestätigungscodes nicht aktualisiert wird.

Abschließend kehren wir noch einmal zum HTML-Code zurück, überwachen mit jQuery das Klickereignis des Benutzers und überprüfen, ob der vom Benutzer eingegebene Bestätigungscode korrekt ist.

jQuery-Code:

$(function(){
    $('#submitBtn').click(function(){
        if ($('#captchaInput').val() != '') {
            $.post('verification.php', {captcha: $('#captchaInput').val()}, function(res){
                if (res == 'success') {
                    alert('验证码输入正确！');
                }
                else {
                    alert('验证码输入错误，请重新输入！');
                    changeCaptcha();
                    $('#captchaInput').val('');
                }
            });
        }
        else {
            alert('请输入验证码！');
        }
    });
});

Nach dem Login kopieren

Im jQuery-Code ermitteln wir zunächst, ob der Benutzer den Verifizierungscode eingegeben hat. Wenn eine Eingabe vorliegt, verwenden wir Ajax, um gegenüber dem Server zu überprüfen, ob der Bestätigungscode korrekt ist. Auf der Serverseite können wir dies durch Mechanismen wie Sitzung oder Cookie erreichen. Hier verwenden wir eineification.php, um den Prozess der Serverüberprüfung des Bestätigungscodes zu simulieren.

Verification.php-Code:

<?php
session_start();
if ($_POST['captcha'] == $_SESSION['captcha']) {
    echo 'success';
}
else {
    echo 'fail';
}
?>

Nach dem Login kopieren

In der Datei „Verification.php“ öffnen wir zunächst die Sitzung und ermitteln dann, ob der vom Benutzer eingegebene Verifizierungscode mit der generierten Verifizierung übereinstimmt Code. Wenn sie übereinstimmen, wird eine erfolgreiche Rückgabe zurückgegeben, andernfalls schlägt die Rückgabe fehl.

Basierend auf dem obigen Code haben wir eine Funktion zum Klicken zum Wechseln der Bestätigungscodes implementiert. Der gesamte Prozess ist einfach und leicht zu verstehen und sowohl für Entwickler als auch für Benutzer sehr benutzerfreundlich. Gleichzeitig können wir auch erkennen, dass die Anwendung von jQuery unseren Code prägnanter und verständlicher machen kann.

Das obige ist der detaillierte Inhalt vonjQuery implementiert einen Click-Switching-Bestätigungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!