Question

我有一个表单，在提交表单之前我会进行一些AJAX错误处理，只是为了改善用户体验。我的问题是变量$user_password在整个过程中似乎都为空，因此错误处理无关紧要。

在下面的代码中，第一个键入功能用于检查密码是否长于最小长度，第二个用于检查密码是否匹配：

$(document).ready(function() {
    $("input[name=user_password]").keyup(function(){    
        var user_password = $("input[name=user_password]").val();
        //data to server...
        $.post("../server/hub.php", {
            //POST name and variable... 
            check_password: user_password
            //places fetched information...
        }, function(data, status) {
            $("#user_password").html(data);
        });
    });
});


$(document).ready(function() {

    $("input[name=user_password_2]").keyup(function(){
        var user_password = $("input[name=user_password]").val();
        var user_password_2 = $("input[name=user_password_2]").val();
        //data to server...
        $.post("../server/hub.php", {
            //POST name and variable... 
            password_match: user_password,
            password_match_2: user_password_2
            //places fetched information...
        }, function(data, status) {
            $("#user_password_2").html(data);
        });
    });

});

将变量重定向到实际执行错误处理的php文件：

if (isset($_POST['check_password'])) {
    $user_password = $_POST['check_password'];

    echo $user_password;

    if ($user_password == "") {
        echo "";
    } elseif (strlen($user_password) < 6) {
        echo "Password must contain at least six characters!";
    } else {
        echo "You are good to go!";
    }
}

if (isset($_POST['password_match'])) {
    $user_password = $_POST['password_match'];
    $user_password_2 = $_POST['password_match_2'];

    if ($user_password_2 == "") {
        echo "";
    } elseif ($user_password !== $user_password_2) {
        echo "Sorry, passwords do not match!";
    } else {
        echo "You are good to go!";
    }
}

尽管返回到html文件的数据仍然为空，并且回显$user_password不会产生任何结果。

这是html段：

<form action="../server/register.php" method="POST">
                        <div class="input_table">                           
                            <table>
                                <thead>
                                    <tr>
                                        <th><h1>Register to LIMS</h1></th>
                                    </tr>
                                </thead>
                                <tbody>

                                    <tr>
                                        <td><input type="password" name="user_password" placeholder="Select Password"><p id="user_password"></p></td>
                                    </tr>
                                    <tr>
                                        <td><input type="password" name="user_password_2" placeholder="Repeat Password"><p id="user_password_2"></p></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <button type="submit" name="user_register" class="button_1">Register</button>
                        <button type="button" class="button_3">Cancel</button>              
                    </form>

任何人都可以解释为什么会这样吗？

Answer 1

我能够按照编写的代码使您的代码正常工作。

我为名为test.php的html创建了一个空白页：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="../server/register.php" method="POST">

  <div class="input_table">
    <table>
      <thead>
        <tr>
          <th><h1>Register to LIMS</h1></th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="password" name="user_password" placeholder="Select Password"><p id="user_password"></p></td>
          </tr>
          <tr>
            <td><input type="password" name="user_password_2" placeholder="Repeat Password"><p id="user_password_2"></p></td>
          </tr>
        </tbody>
    </table>
  </div>

  <button type="submit" name="user_register" class="button_1">Register</button>
  <button type="button" class="button_3">Cancel</button>

</form>

<script>

$(document).ready(function() {
  $("input[name=user_password]").keyup(function(){
      var user_password = $("input[name=user_password]").val();
      //console.log('password 1 key up'); //Check for key up.. It works
      //data to server...
      $.post("hub.php", {
          //POST name and variable...
          check_password: user_password
          //places fetched information...
      }, function(data, status) {
          console.log(data); //Check for your data.
          $("#user_password").html(data); //Data was displayed in div.
      });
  });
});


$(document).ready(function() {

  $("input[name=user_password_2]").keyup(function(){
      var user_password = $("input[name=user_password]").val();
      var user_password_2 = $("input[name=user_password_2]").val();
      //data to server...
      $.post("hub.php", {
          //POST name and variable...
          password_match: user_password,
          password_match_2: user_password_2
          //places fetched information...
      }, function(data, status) {
          $("#user_password_2").html(data);
      });
  });

});

</script>

请注意，我使用hub.php作为AJAX的网址。

另一件事是我正在使用Jquery 3.1.1，并且在表单之前加载了库。

我还将您的jquery代码包装在<script>标记中。

我将hub.php页放在与test.php相同的文件夹中：

<?php

echo 'I made it.';  //Test to see if you landed on the page.

if (isset($_POST['check_password'])) {
    $user_password = $_POST['check_password'];

    echo $user_password;

    if ($user_password == "") {
        echo "";
    } elseif (strlen($user_password) < 6) {
        echo "Password must contain at least six characters!";
    } else {
        echo "You are good to go!";
    }
}

if (isset($_POST['password_match'])) {
    $user_password = $_POST['password_match'];
    $user_password_2 = $_POST['password_match_2'];

    if ($user_password_2 == "") {
        echo "";
    } elseif ($user_password !== $user_password_2) {
        echo "Sorry, passwords do not match!";
    } else {
        echo "You are good to go!";
    }
}


?>

我绝对会检查您的路径。如果您在控制台中看不到响应，则说明您未将AJAX定向到正确的目录。

我对此进行了测试，并且可以正常工作。

Answer 2

roelofco-由于未出现404错误，因此PHP文件路径似乎没有问题。您可以尝试几件事。

请尝试将以下代码添加到hub.php的顶部

<?php 
echo "Entering the Ajax File";
var_dump($_POST);

$("input[name=user_password]").val();-这不是获取值的好方法。 HTML文档中可以存在多个具有相同名称的元素/标签。因此，您可以将html中的name属性更改为id并相应地更改jquery，或者使用$("input[name=user_password]").eq(0).val();-现在，我们告诉JS获得名称为user_password的第一个元素。
请注意，Ajax调用keyup非常昂贵。尝试在表单提交中做到这一点。客户端验证在键入过程中很好。
使用多个DOM准备事件将使网站变慢。将所有代码保留在单个DOM ready函数中始终是理想的选择。

jquery post具有失败和始终回调方法。尝试使用它来获取错误。在您的情况下将是这样。

$.post("../server/hub.php", {
    //POST name and variable... 
    password_match: user_password,
    password_match_2: user_password_2
    //places fetched information...
}, function(data, status) {
    $("#user_password_2").html(data);
}).fail(function() {
    alert( "Some error" );
}).always(function() {
    alert( "Ajax finished" );
});`

Answer 3

因此，问题的答案非常简单，但很容易错过。这再次表明了为什么编写成功的网站必须要有良好的编码习惯。我似乎在这种情况下，name=user_password在代码的其他位置重复了，因此在使用时调用：

var user_password = $("input[name=user_password]").val();

它是指代码另一部分中的输入，而不是我尝试将代码应用于的输入。只需将html代码中的name=user_password更改为name=user_password_1，然后更改ajax代码：

$(document).ready(function() {
    $("input[name=user_password_1]").keyup(function(){  
        var user_password_1 = $("input[name=user_password_1]").val();
        //data to server...
        $.post("../server/hub.php", {
            //POST name and variable...
            check_password: user_password_1
            //places fetched information...
        }, function(data, status) {
            $("#user_password_1").html(data);
        });
    });


    $("input[name=user_password_2]").keyup(function(){
        var user_password_1 = $("input[name=user_password_1]").val();
        var user_password_2 = $("input[name=user_password_2]").val();
        //data to server...
        $.post("../server/hub.php", {
            //POST name and variable... 
            password_match_1: user_password_1,
            password_match_2: user_password_2
            //places fetched information...
        }, function(data, status) {
            $("#user_password_2").html(data);
        });
    });

});

该代码运行完美。尽管我个人认为这是一个愚蠢的错误，但我仍然认为将其作为答案发布很重要，这样其他人可以从仔细检查自己的代码中受益，例如这样的愚蠢错误。

使用AJAX将查询发送到php文件时，变量保持为空

3 个答案: