在 pup 檢查資料庫并確認資料后，我厭倦了傳遞成功訊息如果密碼輸入錯誤，我如何顯示訊息，我嘗試了許多解決方案但沒有成功，我嘗試使用 ajax 解決方案和 JavaScript 沒有成功因為我不知道 ajax 的基礎知識，而且我的 JavaScript 背景很基礎 這是我的代碼
登錄測驗.html
<html>
<link rel="stylesheet" href="LoginStyle.css">
<head>
<title>Login</title>
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form action="http://localhost/Test2/dbloginTest.php" method="post" name="loginform" class="loginform">
<div class="user-box">
<input type="number" name="civilid" required="">
<label>Civil ID</label>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>Password</label>
</div>
<input type="submit" name="submit" Value="Login">
</form>
<a href="Registration.html">
<input type="submit" name="register" Value="Register">
</a>
</div>
</body>
</html>
dbloginTest.php
<?php
require 'C:\Windows\System32\vendor\autoload.php';
if (isset( $_POST['submit'] ) && isset( $_POST['civilid'] ) && isset( $_POST['password'] ) ) {
$civilid = ( $_POST['civilid'] );
$password = ( $_POST['password'] );
$hashpass = "";
$return = array();
//echo extension_loaded( "mongodb" ) ? "loaded\n" : "not loaded\n";
$con = new MongoDB\Client( 'mongodb srv://Admin:[email protected]/?retryWrites=true&w=majority' );
// Select Database
if ( $con ) {
$db = $con->VoterDatabase;
// Select Collection
$collection = $db->Voters;
$cursor = $collection->find( array( 'civilid' => $civilid ) );
foreach ( $cursor as $row ) {
ob_start();
echo $row->password;
$hashpass = ob_get_clean();
}
if ( password_verify($password,$hashpass) ) {
echo "You Have Successully Logged In";
header( 'Location:Voters.html' );
exit;
} else {
echo "Your Civil ID or Password is Incorrect";
header( 'Location:LoginTest.html' );
exit;
}
} else {
die( "Mongo DB not connected" );
}
}
?>
uj5u.com熱心網友回復：
這里有很多東西：
1- 第一：使用 PHP 時不要使用 HTML 檔案。
即使您的代碼只是 html，使用所有 php 也更實用且不那么煩人。所以我會創建另一個檔案 loginTest.php 并將所有 loginTest.html 內容傳輸到其中**
2- SECOND : 成功的警報
我建議您將 jQuery 與 jQuery UI 一起使用。添加腳本鏈接和 UI 樣式表后：
- 在表單后添加一個 div（包含彈出視窗的內容）給它一個 id
<div id="divID" class="mt-5" title="Confirmed addition to the cart">
<p class="alert alert-info w-50" role="alert">
<strong>? You Have Successully Logged In</strong>
</p>
<button class="btn btn-success" name="continue" id="continue-buying" type="button">
Great !
</button>
</div>- 在你的ajax（你需要學習它，你可以在這里找到一個教程），寫下
.done((message)=>{
$('#divId').dialog();
});<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>這會給你一個確認。更多在這里：https ://jqueryui.com/dialog/
完整的 ajax 看起來像這樣：
let form = document.getElementById('form');
form.addEventListener('submit', (event) => {
$.ajax({
url: url,
method: "POST",
type: "POST",
cache: false,
data: {
'YOUR DATA'
},
dataType: 'json',
headers: {
'YOUR HEADERS'
},
success: function (data) {
console.log(data);
}
}).done((message) => {
$('#divID').dialog();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>3- 第三：對于失敗訊息：
當您為 html 頁面創建 php 檔案時，您可以輕松地操作代碼以顯示或不顯示某些 html 部分，如下所示：
<?php if (condition goes here) : ?>
<!--HTML code that appears only if condition is true goes here-->
<?php endif; ?>
php 檔案中 html 頁面的最終結果如下所示：
<html>
<link rel="stylesheet" href="LoginStyle.css">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Login</title>
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form method="post" name="loginform" class="loginform" id="form">
<div class="user-box">
<input type="number" name="civilid" required="">
<label>Civil ID</label>
<?php if($civilIdCondition == false): ?>
<p class="alert alert-danger w-50" role="alert">
<strong>Check CivilId again</strong>
</p>
<?php endif; ?>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>Password</label>
<?php if($passwordVerificationCondition == false): ?>
<p class="alert alert-danger w-50" role="alert">
<strong>Check password again</strong>
</p>
<?php endif; ?>
</div>
<input type="submit" name="submit" Value="Login">
</form>
<a href="Registration.html">
<input type="submit" name="register" Value="Register">
</a>
</div>
<div id="modal" class="mt-5" title="Confirmed addition to the cart">
<p class="alert alert-info w-50" role="alert">
<strong>? You Have Successully Logged In</strong>
</p>
<button class="btn btn-success" name="continue" id="continue-buying" type="button">
Great !
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" type="application/javascript"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
</script>
</body>
</html>uj5u.com熱心網友回復：
您可以像這樣簡單地將所有錯誤和成功訊息保存在會話中......
$_SESSION['messages'][] = "password is incorrect";
header('location: login.php');
exit;
然后顯示錯誤訊息，如果它已設定為這樣......
if(isset($_SESSION['messages'])){
echo implode('. ', $_SESSION['messages'])
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/522345.html