如何使jQuery/Ajax登录返回“错误凭据”错误？

Question

我正在制作一个带有用户登录的MySQL的动态PHP页面。我最近将登录名更改为jQuery/AJAX，以使其更加流畅，而不会丢失用户当前所在的页面。事情是，当我错过我登录证书并不是如何消息，我希望它这样做。

这里是我的形式：

<form id="ajax-login-form" action="session/login.php" method="post" role="form" autocomplete="off"> 
       <div class="form-group"> 
        <label for="username">Login</label> 
        <input type="text" name="u" id="username" tabindex="1" class="form-control" placeholder="Log in" value="" autocomplete="off"> 
       </div> 

       <div class="form-group"> 
        <label for="password">Password</label> 
        <input type="password" name="p" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off"> 
       </div> 
       <div class="form-group"> 
        <div class="row"> 
         <div class="col-xs-5 pull-right"> 
          <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In"> 
         </div> 
        </div> 
       </div> 
      </form> 

我的jQuery/AJAX：

$(document).ready(function() { 
//From insert 
$("#login-submit").click(function() { 
    var $form = $('#ajax-login-form'); 
    $form.submit(false); 
    $.post($form.attr("action"), $form.serializeArray(), function (info) { 
     $("#result").html(info) 
    }) 
    location.reload(); 
}); 
}); 

最后我的PHP代码

<?php 
session_start(); 
$lig = mysql_connect("localhost", "root","") or 
die ("Problema na ligação ao servidor MYSQL"); 
mysql_select_db("demo", $lig); 

$u=$_REQUEST['u']; 
$p=$_REQUEST['p']; 

$sql="select numuti,nome,nomeutilizador,codtipo,reset from utilizadores where nomeutilizador='$u' and password=md5('$p')"; 
$res=mysql_query($sql); 
if (mysql_num_rows($res) == 1) 
{ 
    $lin = mysql_fetch_array($res, MYSQL_ASSOC); 
     $_SESSION['user'] = $lin['nomeutilizador']; 
     $_SESSION['nivel'] = $lin['codtipo']; 
     $_SESSION['reset'] = $lin['reset']; 
     //$_SESSION['foto'] = $lin['imagem']; 
     $_SESSION['nome'] = $lin['nome']; 
     $_SESSION['cod']= $lin['numuti']; 
}else{ 
echo "<div class='alert alert-danger'> 
      <strong><center>Login Inválido, Tente Novamente</center></strong> 
      </div>"; 
} 
?> 

这可能是一个重复的问题，但我不能对于我的问题找不到可靠的答案，我尝试使用div制作错误，如您在login.php页面中看到的。

Answer 1

基础

如果您正在使用旧mysql_connect功能脆弱，你不需要任何其他安全..您的系统将渗透SQL注入。

首先您需要做的是切换到更好的方法，如PDO。

jQuery的

我建议使用submit()函数代替click()和ajax()而不是post()，以更好地处理数据。

$(document).ready(function() { 

    $('#ajax-login-form').submit(function(e) { 
     var form = this; 

     e.preventDefault(); 
     var username = $("#username").val(); 
     var password = $("#password").val(); 

     $.ajax({ 
      type: 'POST', 
      url: 'Your-login-url', 
      data: { 
       username: username, 
       password: password 
      }, 
      success: function(data) { 
       // do your PHP login and echo 1 if authentication was successfull 
       if(data === 1) { 
        form.submit(); 
       } else { 
       // show alert or something that user has wrong credentials ... 
        $("#error_notif").show(); 
       } 
      } 
     }); 
    }); 

}); 

HTML

另一件事是错误通知。我喜欢在窗体或表单容器中添加错误div，但将其设置为隐藏。您可以在jQuery Ajax以0结尾后显示它。

<div id="error_notif">You used wrong credentials.</div> 

<style> 
#error_notif { 
    display:none; 
} 
</style> 

Answer 2

尝试改变您的文章语句来此

$.post($form.attr("action"), $form.serializeArray(), function (info) { 
     $("#result").html(info) 
    }).fail(function(){ 
    alert("Login unsuccessful, please try again."); 
});