Javascript 在 XAMPP 上的 PHP 中不起作用

Question

我一直在尝试让它工作，当我在一个或两个字段上单击少于 3 个字符的注册时，它不会弹出一个框来说明它应该说什么，当我单击上面的注册时3 两者都不会给出确认或错误，更不用说将信息插入数据库了。

<?php

    $sqlHost = 'localhost';
    $sqlUser = 'root';
    $sqlPass = 'hidthepassword';
    $sqlDatabase = 'RPG';

    $connection = new PDO('mysql:host='.$sqlHost.';dbname='.$sqlDatabase.';charset=utf8', $sqlUser, $sqlPass);
    $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


    $username = null;
    $password = null;

    if(isset($_GET['user'])) {
        $username = $_GET['user'];
    }

    if(isset($_GET['pass'])) {
        $pass = $_GET['pass'];
    }

    if((isset($username)) && (isset($password))) {
        // TODO SQL
        $salt = genSalt(40);
        $passHash = md5(md5($salt) . md5($password));
        $statement = $connection->prepare("INSERT INTO `rpg`.`accounts` (`id`, `username`, `password`, `salt`) VALUES (:user, :pass, :salt);");
        $statement->bindParam(":user", $username);
        $statement->bindParam(":pass", $passHash);
        $statement->bindParam(":salt", $salt);
        if($statement->execute()) {
            echo "Thank-you for your registration, " . $username;
        } else {
            echo "Sorry, your registration failed.";
        }

    } else {
        // DISPLAY

            echo '<input type="text" id="user" placeholder="username"/>
        <input type="text" id="pass" placeholder="password"/>
        <button id="button">Register</button>

        <script>
            var r = document.getElementById("button");
            button.addEventListener("click", function() {
                var user = document.getElementById("user");
                var pass = document.getElementById("pass");
                if(user.value.length < 3 || pass.value.length < 3) {
                    alert("Please enter a valid username or password");
                } else {
                    window.location = "index.php?user="user.value+"&pass="+pass.value;
                }
            ));     
        </script>
        ';
    }

    function genSalt($length) {
        $variables = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789";
        $charLength = strlen($variables);
        $returned = "";
        for($i = 0; $i < $length; $i++) {
            $returned .= $variables[rand(0, ($charLength - 1))];
        }
        return $returned;
    }
?>

Answer 1

这里有几个错误：

首先，在 PHP 中，您从 $password 切换到 $pass。所以修复它：

if (isset($_GET['pass'])) {
    $password = $_GET['pass']; // was $pass = $_GET['pass'];
}

在 JavaScript 中，我发现您的 addEventListener 代码有 3 个错误：

• 正如其他人所提到的，您从 r 切换到 button 您打算使用相同的参考。
• 您在尝试将 user.value 连接到位置字符串时缺少一个加号 (+)。
• 您使用“));”关闭事件监听器而不是“});”，这是一个语法错误。

最终结果：

// was var r = ...
var button = document.getElementById("button");
button.addEventListener("click", function () {
    var user = document.getElementById("user");
    var pass = document.getElementById("pass");
    if (user.value.length < 3 || pass.value.length < 3) {
        alert("Please enter a valid username or password");
    } else {
        // was "index.php?"user.value ...
        window.location = "index.php?user="+user.value+"&pass="+pass.value;
    }
}); // was ));

Answer 2

您将按钮定义为r

var r = document.getElementById("button");

然后将事件侦听器绑定到名为button 的变量：

button.addEventListener("click", function()

在你的情况下应该是r。

此外，您应该为此使用 POST 而不是 GET（或任何对您的应用程序/数据库/等进行更改的东西）