检查密码是否正确jquery

Question

我的登录表单有问题。当我尝试登录时，javascript 总是 returns 错误值，即使我输入了正确的用户名和密码也是如此。

这是我在 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");
    }
});
});

这是我在 PHP 文件中的代码：

<?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

问题出在你对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 方法的工作方式是这样的：

你的JS代码使用$.post
你的 JS 代码继续，继续下一步
一段时间后（可能是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 2

因为 AJAX 不会 return 立即得到结果 - 异步 - 你想做检查 只有当你有结果时 - 在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

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");
    });
});

检查密码是否正确jquery

Check if password is correct jquery

php

forms

passwords

jquery

login