javascript - 为什么我的 javascript DOM 不起作用？

Question

这是我的整个页面。我不知道出了什么问题。这太令人沮丧了，因为它太简单了。

当我尝试获取输入字段的值时，它什么也没返回。即使我在 AJAX 之前发出警报，它也不会写出任何内容。我复制了一个输入 dom get 在我的下面，它是完全一样的。

怎么了？

注册.php:

<?php
    if(isset($_POST["php_username"]) && isset($_POST["php_password"]) && isset($_POST["php_password2"]) && isset($_POST["php_email"])){
        $error = "";
        if(strlen($_POST["php_username"]) < 8){
            $error = $error."Username has to be at least 8 characters.<br>";
        }
        if(strlen($_POST["php_password"]) < 8){
            $error = $error."password has to be at least 8 characters.<br>";
        }
        if(strlen($_POST["php_username"]) > 16){
            $error = $error."Username can't be more than 16 characters.<br>";
        }
        if(strlen($_POST["php_password"]) < 16){
            $error = $error."Password can't be more than 16 characters.<br>";
        }
        if(strcmp($_POST["php_password"],$_POST["php_password2"])){
            $error = $error."Password confirmation falied.<br>";
        }
        echo($error);

    }else{
        echo('
            <div id="register-form">
                <form>
                    <h2 style="text-decoration: underline; margin-bottom: 10px;">Registration</h2><br><br>
                    Username:<br>
                    <input type="text" maxlength="16" id="username" value="asd" /><br>
                    Password:<br>
                    <input type="password" maxlength="16" id="password" /><br>
                    Confirm password:<br>
                    <input type="password" maxlength="16" id="password2" /><br>
                    E-mail address:<br>
                    <input type="email" id="email" /><br><br>
                    <input type="button" id="registration-submit" value="Signup"><br>
                    <div id="registration-response">                        
                    </div>
                </form>
            </div>
            <script>
                $("#registration-submit").click(function(){
                    var username = document.getElementById("username").value; 
                    var password = document.getElementById("password").value; 
                    var password2 = document.getElementById("password2").value; 
                    var email = document.getElementById("email").value; 

                    $.post("registration.php",{
                        "php_username": username,
                        "php_password": password,
                        "php_password2": password2,
                        "php_email": email
                    },
                    function(data, status){
                        $("#registration-response").html(data);
                        $("#registration-response").fadeIn(750);
                    });

                });
            </script>
        ');
    }
?>

Answer 1

只需将您的 javascript 放在 echo 语句之外，并将其包装在 $(document).ready();

中

        <?php
            if(isset($_POST["php_username"]) && isset($_POST["php_password"]) && isset($_POST["php_password2"]) && isset($_POST["php_email"])){
                $error = "";
                if(strlen($_POST["php_username"]) < 8){
                    $error = $error."Username has to be at least 8 characters.<br>";
                }
                if(strlen($_POST["php_password"]) < 8){
                    $error = $error."password has to be at least 8 characters.<br>";
                }
                if(strlen($_POST["php_username"]) > 16){
                    $error = $error."Username can't be more than 16 characters.<br>";
                }
                if(strlen($_POST["php_password"]) < 16){
                    $error = $error."Password can't be more than 16 characters.<br>";
                }
                if(strcmp($_POST["php_password"],$_POST["php_password2"])){
                    $error = $error."Password confirmation falied.<br>";
                }
                echo($error);

            }else{
                echo('
                    <div id="register-form">
                        <form>
                            <h2 style="text-decoration: underline; margin-bottom: 10px;">Registration</h2><br><br>
                            Username:<br>
                            <input type="text" maxlength="16" id="username" value="asd" /><br>
                            Password:<br>
                            <input type="password" maxlength="16" id="password" /><br>
                            Confirm password:<br>
                            <input type="password" maxlength="16" id="password2" /><br>
                            E-mail address:<br>
                            <input type="email" id="email" /><br><br>
                            <input type="button" id="registration-submit" value="Signup"><br>
                            <div id="registration-response">                        
                            </div>
                        </form>
                    </div>');


    <script>

    $(document).ready(function(){
    $("#registration-submit").click(function(){
        var username = document.getElementById("username").value; 
        var password = document.getElementById("password").value; 
        var password2 = document.getElementById("password2").value; 
        var email = document.getElementById("email").value; 

        $.post("registration.php",{
            "php_username": username,
            "php_password": password,
            "php_password2": password2,
            "php_email": email
             },
         function(data, status){
             $("#registration-response").html(data);
             $("#registration-response").fadeIn(750);
             });

           });
       });                    

   </script>

            }
        ?>