使用 ajax jquery php mysql 检查用户名

Posted 2023-02-24

【中文标题】使用 ajax jquery php mysql 检查用户名

【英文标题】：Check username with ajax jquery php mysql

【发布时间】：2016-12-03 21:55:33

【问题描述】：

我有表用户：

id：整数， 用户名：varchar(255)， 密码:varchar(255),

我会检查登录是否存在于数据库中

我尝试使用这段代码 jquery 和 html：

 <div class="form-group">
     <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">username <span class="required">*</span></label>
     <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text"  class="form-control col-md-7 col-xs-12"  name="username " id="username ">
          <span id="availablity"></span>
     </div>
 </div>
<script type="text/javascript">

    $('document').ready(function()
            $('#username').blur(function()
                var username = $(this).val();
                $.ajax (
                    url = "check.php",
                    method = "POST",
                    data =  username :username ,
                    dataType : "text",
                    success:function(html)
                    
                        $('#availablity').html(html);
                    
                );
            );
    );
</script>

页面检查.php：

if(isset($_POST['username']))
                $username  = $_POST["username"];
                $sql = $db->query("SELECT * FROM users WHERE username  = '$username'");
                if($sql->rowCount() > 0)
                     echo '<span class="text-danger">Not Exist</span>';
                else
                    echo '<span class="text-success">Exist</span>';
                

但没有结果

【问题讨论】：

你的 console.log(html) 的结果是什么？

Bobby Tables!

出于安全原因：您确实应该转义您的用户名。目前，您的应用程序容易受到 SQL 注入攻击。

除此之外，你的逻辑是错误的：rowCount()>0 应该返回“Exists”

【参考方案1】：

请尝试以下代码。

JavaScript 代码

 $('document').ready(function()
          $('#username').change(function()
               var username = $(this).val();
                $.ajax (
                    url : "check.php",
                    method : "POST",
                    data :  username :username ,
                    dataType: "text",
                    success:function(html)
                    
                        $('#availablity').html(html);
                    
                );
            );
   );

你提到了 id="username "（带空格），请按如下方式更改。

<input type="text"  class="form-control col-md-7 col-xs-12"  name="username" id="username">

【讨论】：

@johansson，您接受了我的回答，然后将其删除。

【参考方案2】：

您在 ajax 配置中使用了 =。那是语法错误。使用

$.ajax(
    url: "check.php",
    method: "POST",
    data: username: username,
    dataType: "text",
    success: function (html) 
        $('#availablity').html(html);
    
);

改为。

【参考方案3】：

这应该是您的代码：

$('document').ready(function()
            $('#username').blur(function()

                var username = $(this).val();
                $.ajax (
                    url :"check.php",
                    method: "POST",
                    data : username :username ,
                    dataType : "text",
                    success:function(html)
                    
                        $('#check').html(html);
                    
                );
            );
    );

【参考方案4】：

看起来 Jquery 语法错误...

<script type="text/javascript">

    $('document').ready(function()
            $('#username').blur(function()
                var username = $(this).val();
                $.ajax (
                    url : "check.php",
                    method : "POST",
                    data :  username :username ,
                    dataType : "text",
                    success:function(html)
                    
                        console.log(html);
                        $('#availablity').html(html);

                    ,
                    error: function(html)
                    
                        console.log(html);
                    
                );
            );
    );
</script>

检查您的控制台消息。