登录失败时不刷新
Don't refresh when login fail
我正在为我的作业创建一个网站,我希望在输入错误的密码和用户名组合后页面不会刷新。
我同时使用PHP和javascript,我不使用MYSQL来存储登录信息
这是我的PHP脚本
<?php
if (isset($_POST['login']) && !empty($_POST['username'])
&& !empty($_POST['password'])) {
if ($_POST['username'] == 'admin' &&
$_POST['password'] == 'admin') {
$_SESSION['username'] = 'admin';
header ('Location: mainPage.php');
}else {
/*What should I include here? */
}
}?>
这是我的Javascript代码
<script>function pasuser(form) {
if (form.username.value=="admin") {
if (form.password.value=="admin") {
}
else {
document.getElementById("loginFail").innerHTML = '<div class="w3-container w3-section w3-red"> <span onclick="this.parentElement.style.display=''none''" class="w3-closebtn">×</span><h3>WRONG PASSWORD</h3><p>You need to enter the correct password.</p></div>';
}
}
else{
document.getElementById("loginFail").innerHTML = '<div class="w3-container w3-section w3-red"> <span onclick="this.parentElement.style.display=''none''" class="w3-closebtn">×</span><h3>WRONG USERNAME</h3><p>You need to enter the correct username.</p></div>';
}</script>
和形式
<html><form class="w3-container w3-card-8 w3-margin-16" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<h2 class="w3-text-blue">LOGIN PAGE</h2>
<p>
<label class="w3-text-blue"><b>Username</b></label>
<input class="w3-input" name="username" type="text" placeholder="Enter your username here"></p>
<p>
<label class="w3-text-blue"><b>Password</b></label>
<input class="w3-input" name="password" type="password" placeholder="Enter your password here"></p>
<p>
<button type='submit' class="w3-btn w3-blue" type="button" name="login" value="LOGIN" onclick="pasuser(form)">LOGIN</button></p>
<span id="loginFail">
</form></html>
基本上我想要显示 W3 的 javascript 函数。CSS 卡在登录不成功时发出警报,而无需重新加载页面。如果页面自行重新加载,卡将消失
由于您没有使用 jQuery,因此以下是本机代码:
function pasuser(){
var request = new Request('login.php',{
method: 'POST',
body: new FormData( document.getElementById('form') ), //set id='form' to your <form> element
mode: 'same-origin',
redirect: 'manual',
headers: new Headers({ 'Content-type': 'application/x-www-form-urlencoded' });
});
fetch(request).then(function(response){
if(response.message == "success"){
alert("Login Info correct!");
window.location.href="home.php" // For eg.
//Do redirect or whatever.
}else if(response.message == "error"){
document.querySelector('#loginFail').innerHTML = "Login Info Incorrect!"; //display error message
}
})
}
并将您的 php 分成不同的登录.php文件。不要使用PHP_SELF。它容易受到 XSS 攻击。
login.php
<?php
if (isset($_POST['login']) && !empty($_POST['username']) && !empty($_POST['password'])) {
if ($_POST['username'] == 'admin' && $_POST['password'] == 'admin') {
$_SESSION['username'] = 'admin';
$res = array("message"=>"success");
header("Content-type: application/json");
echo (json_encode($res));
}else {
$res = array("message"=>"error");
header("Content-type: application/json");
echo(json_encode($res));
}
}
?>
相关文章:
- PHP和JS脚本的奇怪问题,在我刷新页面之前第一次失败
- Jquery选择菜单选项在页面刷新时失败
- 登录失败时不刷新
- AngularJS:cookie 在浏览器刷新时失败
- 第一次加载时绘制到画布失败.刷新后就可以工作了
- JavaScript仅在Chrome中刷新后失败
- Ajax调用有时工作,有时工作和刷新,有时刷新和失败....
- Firefox失败-使用文档后.写入和更新位置.哈希导致页面刷新
- 在页面刷新时,单元测试在通过和失败之间交替进行
- Ruby on Rails在使用ajax刷新页面时失败
- 如何刷新jwt并重新发送失败的http请求
- AngularJS html5Mode刷新失败
- jQueryUI可排序刷新失败
- Javascript会间歇性地失败,但在页面刷新时可以正常工作
- 刷新令牌是如何工作的,以及上次失败的http请求是如何再次调用的,给出401.
- 表单提交第一次失败,并在刷新页面时工作
- jsTree 在第二次刷新时失败
- 尝试使用AJAX提交而不刷新,静默失败
- 提交失败后刷新jquery表单
- 如果iframe刷新失败,则X