jquery检查密码是否正确

Question

我的登录表单有问题。当我尝试登录时，即使我输入了正确的用户名和密码，javascript 也总是返回 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

因为 AJAX 不会立即返回结果 - ASYNCHRONOUS - 您希望仅在获得结果时进行检查 - 在 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);

Answer 3

问题在于您使用 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 的异步特性并理解它，然后才能扩展此片段以做很多事情。