Ajax调用php函数破坏了所有javascript函数和页面

Question

我正在尝试验证用户名是否已被占用。输入字段的这个onchange。我已经得到了其他检查，但是自从我添加了 ajax 调用后它们就不再起作用了。我是 ajax 和 javascript 的新手，所以错误可能存在。

html 表单：

<form action="test" method="post">
  <input id="username" type="text" placeholder="Gebruikersnaam" name="username" required onchange="checkUserName()">
  <br>
  <input id="email" type="text" placeholder="Email" name="email" required onchange="validateEmail()">
  <br>
  <input id="pass1" type="password" placeholder="Type wachtwoord" name="password1" required>
  <br>
  <input id="pass2" type="password" placeholder="Bevestig wachtwoord" name="password2" required onchange="passwordCheck()">
  <br>
  <select name="typeAccount">
    <option value="bedrijf">Bedrijf</option>
    <option value="recruiter">Recruiter</option>
    <option value="werkzoekende">Talent zoekt job</option>
  </select>
  <p id="demo1">
  </P>
  <p id="demo2">
  </P>
  <button type="submit">Scrijf mij in!</button>
</form>

我使用的javascript：

    <script src="jquery.js">
        function passwordCheck(){
            var password1 = document.getElementById('pass1').value;
            var password2 = document.getElementById('pass2').value;

            if(password1 !== password2){
                document.getElementById("pass1").style.borderColor = "#ff3333";
                document.getElementById("pass2").style.borderColor = "#ff3333";
            }else{
                document.getElementById("pass1").style.borderColor = "#1aff1a";
                document.getElementById("pass2").style.borderColor = "#1aff1a";
            }
        }
        function validate(email){
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }
        function validateEmail(){
            var email = document.getElementById('email').value;
            if(validate(email)){
                document.getElementById("email").style.borderColor = "#1aff1a";
            }else{
                document.getElementById("email").style.borderColor = "#ff3333";
            }
        }
        function checkUserName(){
            var username = document.getElementById('username').value;
            if(username === ""){
                document.getElementById("username").style.borderColor = "#ff3333";
            }else{
                $.ajax({
                    url: "userCheck.php",
                    data: { action : username },
                    succes: function(result){
                        if(result === 1){
                            document.getElementById("username").style.borderColor = "#1aff1a";
                        }else{
                            document.getElementById("username").style.borderColor = "#ff3333";
                        }
                    }
                });
            }
        }
    </script>

我使用的 php 脚本位于不同的文件中：

<?php
    include("connect.php");
    $connect = new Connect();
    $username = mysql_real_escape_string($_POST['username']); 
    $result = mysql_query('select username from usermaindata where username = "'. $username .'"'); 
    if(mysql_num_rows($result)>0){  
        echo 0;  
    }else{  
        echo 1;  
    }  
?>

脚本和 html 表单在同一个 html 文件中，而 php 在单独的 PHP 文件中。 我只想检查名称是否已经在数据库中。

Answer 1

我假设你的数据库连接是完美的。

$username = mysql_real_escape_string($_POST['username']);

把上面的代码改成

$username = mysqli_real_escape_string($db_connection,$_REQUEST['action']);

因为在你的 ajax 中你正在做这样的事情

$.ajax({
                    url: "userCheck.php",
                    data: { action : username },
                    succes: function(result){
                        if(result === 1){
                            document.getElementById("username").style.borderColor = "#1aff1a";
                        }else{
                            document.getElementById("username").style.borderColor = "#ff3333";
                        }
                    }
                });

您尚未指定请求类型，并且您正在使用具有不同变量名称 username 的 $_POST 获取值，这实际上是值 你应该使用$_REQUEST['action'] 并确保您在 html 中添加了 jquery.js 文件。