[英]Variable remains empty when using AJAX in sending query to php file
我有一个表单,在提交表单之前我会进行一些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>
谁能解释为什么会这样?
当您编写代码时,我能够使您的代码正常工作。
我为html创建了一个空白页,名为test.php
:
<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的URL。
另一件事是我正在使用Jquery 3.1.1,并且在表单之前加载了库。
我还将您的jquery代码包装在<script>
标记中。
我放置在与test.php
相同的文件夹中的hub.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定向到正确的目录。
我对此进行了测试,并且可以正常工作。
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("../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" ); });`
因此,该问题的答案非常简单,但很容易错过。 这再次表明了为什么编写成功的网站必须要有良好的编码习惯。 我似乎在这种情况下, 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);
});
});
});
该代码运行完美。 尽管我个人认为这是一个愚蠢的错误,但我仍然认为将其作为答案发布很重要,这样其他人可以从仔细检查自己的代码中受益,例如这样的愚蠢错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.