[英]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.