检查密码是否正确jquery

Question

我有登录表格的问题。当我尝试登录时，即使在输入正确的用户名和密码时，始终返回false值。

这里是我的jQuery的文件代码：

$(document).ready(function(){ 

var teamname = $("#teamname"); 
var teampassword = $("#teampassword"); 

function isPasswordCorrect() 
{ 
    var password = teampassword.val(); 
    var name = teamname.val(); 
    var result = false; 

    $.post('../php/validations/validatePassword.php', {tname: name, tpassword: password}, function(data){ 
     if(data == 1){ 
      result = true; 
     }else{ 
      result = false; 
     } 
    }); 
    return result; 
} 

$("#join").click(function(){ 
    if(isPasswordCorrect()){ 
     alert("You have joined"); 
    }else{ 
     alert("You have not joined"); 
    } 
}); 
}); 

这是我在PHPfile代码：

<?php 
$teamname = $_POST['tname']; 
$teampassword = $_POST['tpassword']; 

if($teamname != "" || $teampassword !=""){ 
    include('../connection.php'); // Here is the log in to the phpmyadmin 

    $queryCheckPassword = mysqli_query($con, "SELECT password FROM 
    teams WHERE name = '$teamname'"); 

    $row = mysqli_fetch_row($queryCheckPassword); 
    $teamPassword = $row[0]; 
    if($teamPassword == $teampassword) 
    { 
     echo 1; 
    }else{ 
     echo 0; 
    } 
} 
?> 

这里是我在HTML文件中的代码：

<form id="joinform"> <!-- action="teams.php" method="post"> --> 
    <ul> 
     <div> 
      <label>Team name&nbsp<font color='red'>*</font></label> 
      <input type='team' name='teamname' id='teamname' placeholder='Team name' readonly='readonly'/> 
      <span id='teamnameinfo'>Select an existing team</span> 
     </div> 
     <div> 
      <label for="teampassword">Team password&nbsp<font color='red'>*</font></label> 
      <input type='password' name='teampassword' id="teampassword" placeholder='Team password'/> 
      <span id='teampasswordinfo'>Write team password</span> 
     </div> 
     <div> 
      <button name='join' id='join'>Join</button> 
     </div> 
    </ul> 
</form> 

Answer 1

PeterKA大约是正确的异步。默认值（false）可能在异步调用返回之前返回。尝试添加回调（未经测试）：

function isPasswordCorrect(callback) 
{ 
    var password = teampassword.val(); 
    var name = teamname.val(); 

    $.post('../php/validations/validatePassword.php', {tname: name, tpassword: password}, 
      function(data) { callback(data == 1); }); 
} 

$("#join").click(function(){ 
    isPasswordCorrect(function(result) { 
     if (result) 
      alert("You have joined"); 
     else 
      alert("You have not joined"); 
    }); 
}); 

Answer 2

问题在于你使用Javascript。看看你的isPasswordCorrect函数（我稍微重新格式化，以使问题更清晰一点）：

function isPasswordCorrect() 
{ 
    var password = teampassword.val(); 
    var name = teamname.val(); 
    var result = false; 

    $.post(
     '../php/validations/validatePassword.php', 
     {tname: name, tpassword: password}, 
     function (data) { 
      if(data == 1){ 
       result = true; 
      }else{ 
       result = false; 
      } 
     } 
    ); 

    return result; 
} 

请参阅function (data) {}在那里？这是一个回调。该$.post方法的工作原理是这样的：

1. 您的JS代码发送到使用$.post

2. 你的JS代码的服务器请求继续，移动到下一个

3. 一段时间无论发生什么事以后（可能是10毫秒后，可能是30秒后），服务器响应请求。 那时你的回调叫做。

这是什么意思？当您的代码碰到return result;行时，您的代码刚将请求提交给服务器，并且服务器可能尚未响应。因此，result仍然是false。

迅速解决这个问题对于alert语句进入回调，像这样：

function isPasswordCorrect() 
{ 
    var password = teampassword.val(); 
    var name = teamname.val(); 

    $.post(
     '../php/validations/validatePassword.php', 
     {tname: name, tpassword: password}, 
     function (data) { 
      if(data == 1){ 
       alert("You have joined"); 
      }else{ 
       alert("You have not joined"); 
      } 
     } 
    ); 
} 

$("#join").click(function(){ isPasswordCorrect(); }); 

不过，我想你会想要做的不仅仅是alert更多的东西。你需要研究JavaScript的异步特性并理解它，然后才能扩展这个片段来做很多事情。

Answer 3

因为AJAX不会立即返回结果 - 异步 - 你想要做的检查只有只有当你有结果 - 在AJAX回调，像这样：

function isPasswordCorrect() 
{ 
    var password = teampassword.val(); 
    var name = teamname.val(); 
    $.post(
     '../php/validations/validatePassword.php', 
     { tname: name, tpassword: password }, 
     function(data) { 
      if(data == 1) { 
       alert("You have joined"); 
      } else { 
       alert("You have not joined"); 
      } 
     } 
    ); 
} 

$("#join").click(isPasswordCorrect);