通过PHP调用外部文件中定义的Javascript函数
我有一个网页，上面有一个由用户名和密码文本字段组成的简单登录表单 我使用通过PHP调用外部文件中定义的Javascript函数,javascript,php,Javascript,Php,我有一个网页，上面有一个由用户名和密码文本字段组成的简单登录表单 我使用javascript外部文件验证登录表单，如果javascriptcode返回true，则提交登录表单，否则将通过我编写的名为javascript的函数displayErrorBlock（）显示错误消息 如果使用PHP提交表单，我将验证用户名和密码。如果用户名/密码组合不正确或数据库中不存在，我想从PHPcode中调用相同的javascript函数（displayErrorBLock） 为了做到这一点，我附和了这一点 els
javascriptjavascripttruejavascriptdisplayErrorBlock（）PHPPHPjavascript（displayErrorBLock）else { // if username/password combination is incorrect
echo '<script>displayErrorBlock("Incorrect Username/Password")</script>';
}
<?php
require 'DbConnection.php';
// if login button is clicked
if(isset($_POST['login-btn'])) {
$username = $_POST['username-field'];
$password = $_POST['password-field'];
verifyLoginCredentials($username, $password);
}
// verify admin login credentials
function verifyLoginCredentials($username, $password) {
global $dbConnect;
$query = 'SELECT full_name, username, password FROM admins WHERE username = ?';
$statement = $dbConnect->prepare($query);
if($statement) {
$statement->bind_param('s', $username);
$statement->execute();
$resultSet = $statement->get_result();
// since there will be only one row returned at max, no need of a loop
$row = $resultSet->fetch_assoc();
if($row != null) {
$adminFullName = $row['full_name'];
$adminUsername = $row['username'];
$adminPassword = $row['password'];
// if username/password is correct start session and store
// username, password, full name in the session and login
// admin to his account
if($username === $adminUsername && password_verify($password, $adminPassword)) {
session_start();
$_SESSION['current_admin_fullname'] = $adminFullName;
$_SESSION['current_admin_username'] = $adminUsername;
$_SESSION['current_admin_password'] = $adminPassword;
//take current admin to admin dashboard
header('Location:admin dashboard.php');
}
else { // if username/password combination is incorrect
echo '<script>displayErrorBlock("Incorrect Username/Password")</script>';
}
} else { // if username doesn't exists in the database
echo '<script>displayErrorBlock("Entered Username isn\'t registered")</script>';
}
}
}
?>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../Resources/Bootstrap v4.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../CSS/admin login.css"/>
<link rel="stylesheet" href="../CSS/common.css"/>
<title>Admin Login</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 navbar-container">
<nav class="top-navbar">
<img src="../Resources/images/logo.png" alt="logo"/>
<p>Admin Panel</p>
</nav><!--end of navbar-->
</div><!--end of first column-->
</div><!--end of first row-->
<div class="row">
<div class="col-sm-4 login-form-container">
<p class="error-msg-block">
<span></span>
</p>
<form class="login-form" method="post" action="admin login.php" onsubmit="return validateForm()">
<p>Welcome Back!</p>
<div class="form-group username-group">
<label for="username-field">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<img src="../Resources/images/envelope.png" alt="envelope image"/>
</div>
</div>
<input class="form-control" id="username-field" type="text" name="username-field" id="username-field" placeholder="Username"/>
</div>
</div><!--end of first form group-->
<div class="form-group password-group">
<label for="password-field">Password</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<img src="../Resources/images/lock.png" alt="lock image"/>
</div>
</div>
<input class="form-control" id="password-field" type="password" name="password-field" id="password-field" placeholder="Password"/>
</div>
</div><!--end of second form-group-->
<input type="submit" class="btn" id="login-btn" name="login-btn" value="Login"/>
</form><!--end of login form-->
</div><!--end of first column-->
</div><!--end of second row-->
</div><!--end of container-->
<!--CDN versions of JQuery and Popper.js-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="../Resources/Bootstrap v4.1/js/bootstrap.min.js"></script>
<script src="../Javascript/admin login form validation.js"></script>
</body>
</html>
let loginForm = document.querySelector('.login-form');
let usernameField = document.getElementById('username-field');
let passwordField = document.getElementById('password-field');
// submit login form to server using ajax
function ajaxFormSubmit() {
'use strict';
let ajaxRequest = new XMLHttpRequest();
let url = 'admin login.php';
// login form submitted on server successfully
ajaxRequest.onload = function () {
if (ajaxRequest.readyState === 4 && ajaxRequest.status === 200) {
console.log(ajaxRequest.responseText);
displayInfoMessage(ajaxRequest.responseText, 'success');
}
};
// error while login form submission on server
ajaxRequest.onerror = function () {
if (ajaxRequest.status !== 200) {
console.log(ajaxRequest.responseText);
displayInfoMessage(ajaxRequest.responseText, 'error');
}
};
ajaxRequest.open('POST', url, true);
ajaxRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajaxRequest.send(new FormData(loginForm));
}
function validateForm(e) {
'use strict';
// prevent form submission
e.preventDefault();
if (anyEmptyField()) {
displayInfoMessage('Please fill all the empty fields', 'error');
highLightEmptyFields();
//return false;
return;
}
// check if username is in right format
if (!(regexTester(/^[A-Za-z0-9_]+$/g, usernameField.value))) {
displayInfoMessage('Username not valid', 'error');
highLightTextField(usernameField);
//return false;
return;
}
// check if username is atleast 3 characters long
if (usernameField.value.length < 3) {
displayInfoMessage('Username should contain atleast 3 characters', 'error');
highLightTextField(usernameField);
//return false;
return;
}
// check if password is in right format
if (!(regexTester(/^[A-Za-z0-9_]+$/g, passwordField.value))) {
displayInfoMessage('Password not valid', 'error');
highLightTextField(passwordField);
//return false;
return;
}
// check if password is atleast 6 characters long
if (passwordField.value.length < 6) {
displayInfoMessage('Password should contain atleast 6 characters', 'error');
highLightTextField(passwordField);
//return false;
return;
}
//return true;
// submit form information to server via ajax
ajaxFormSubmit();
}
// add submit event listener on login form
loginForm.addEventListener('submit', validateForm);
let loginForm=document.querySelector（'.login form'）；
让usernameField=document.getElementById（'username-field'）；
让passwordField=document.getElementById（'password-field'）；
//使用ajax向服务器提交登录表单
函数ajaxFormSubmit（）{
"严格使用",；
让ajaxRequest=newXMLHttpRequest（）；
让url='admin login.php'；
//已在服务器上成功提交登录表单
ajaxRequest.onload=函数（）{
if（ajaxRequest.readyState==4&&ajaxRequest.status==200）{
log（ajaxRequest.responseText）；
displayInfoMessage（ajaxRequest.responseText，“成功”）；
}
};
//在服务器上登录表单提交时出错
ajaxRequest.onerror=函数（）{
如果（ajaxRequest.status！==200）{
log（ajaxRequest.responseText）；
displayInfoMessage（ajaxRequest.responseText，“错误”）；
}
};
打开（'POST'，url，true）；
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
发送（新表单数据（loginForm））；
}
函数validateForm（e）{
"严格使用",；
//防止表格提交
e、 预防默认值（）；
if（anyEmptyField（））{
displayInfoMessage（'请填写所有空字段'，'错误'）；
highLightEmptyFields（）；
//返回false；
返回；
}
//检查用户名的格式是否正确
if（！（regexTester（/^[A-Za-z0-9!]+$/g，usernameField.value）））{
displayInfoMessage（'用户名无效'，'错误'）；
highLightTextField（usernameField）；
//返回false；
返回；
}
//检查用户名长度是否至少为3个字符
if（usernameField.value.length<3）{
displayInfoMessage（'用户名应至少包含3个字符'，'错误'）；
highLightTextField（usernameField）；
//返回false；
返回；
}
//检查密码的格式是否正确
if（！（regexTester（/^[A-Za-z0-9!]+$/g，passwordField.value）））{
displayInfoMessage（'密码无效'，'错误'）；
highLightTextField（密码字段）；
//返回false；
返回；
}
//检查密码长度是否至少为6个字符
if（passwordField.value.length<6）{
displayInfoMessage（'密码应至少包含6个字符'，'错误'）；
highLightTextField（密码字段）；
//返回false；
返回；
}
//返回true；
//通过ajax向服务器提交表单信息
ajaxFormSubmit（）；
}
//在登录表单上添加提交事件侦听器
loginForm.addEventListener（'submit'，validateForm）；
<script type="text/javascript">
// Wait for the document to load
document.addEventListener("DOMContentLoaded", function(event) {
// Add event listener to form submit
document.querySelector(".login-form").addEventListener("submit", function(e) {
// Prevent the form from being submitted
e.preventDefault();
// Perform displayErrorBlock() function
validateForm();
// Create native XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Set POST request header leaving second parameter empty because PHP
// code is in the same file.
xhr.open('POST', '');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
// Everything was ok, handle response
if (xhr.readyState === 4 && xhr.status === 200) {
// Succesful login. Redirect user
if(xhr.responseText === 'succes'){
window.location.replace("https://your_website.com/admin dashboard.php");
}
// Wrong username / password
else if(xhr.responseText === 'errorUserPass'){
displayErrorBlock("Incorrect Username/Password");
}
// User doesn't exist
else if(xhr.responseText === 'errorNotRegistered'){
displayErrorBlock("Entered Username isn't registered");
}
// Something else was returned by PHP
else {
displayErrorBlock("Unknown error: "+ xhr.responseText);
}
}
// Request failed, alert error
else if (xhr.status !== 200) {
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send(new FormData(document.querySelector(".login-form")));
});
});
</script>
//等待文档加载
document.addEventListener（“DOMContentLoaded”），函数（事件）{
//将事件侦听器添加到表单提交
document.querySelector（“.login form”）.addEventListener（“提交”，函数（e）{
//阻止提交表单
e、 预防默认值（）；
//执行displayErrorBlock（）函数
validateForm（）；
//创建本机XMLHttpRequest对象
var xhr=new XMLHttpRequest（）；
//设置POST请求头，将第二个参数留空，因为PHP
//代码在同一个文件中。
xhr.open（'POST'，''）；
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
xhr.onload=函数（）{
//一切都很好，处理回应
如果（xhr.readyState==4&&xhr.status==200）{
//成功登录。重定向用户
如果（xhr.responseText==“成功”）{
window.location.replace（“https://your_website.com/admin dashboard.php）；
}
//错误的用户名/密码
else if（xhr.responseText=='errorUserPass'）{
displayErrorBlock（“不正确的用户名/密码”）；
}
//用户不存在
else if（xhr.responseText==='errorNotRegistered'）{
displayErrorBlock（“输入的用户名未注册”）；
}
//PHP还返回了其他内容
否则{
displayErrorBlock（“未知错误：+xhr.responseText”）；
}
}
//请求失败，警报错误
否则如果（xhr.status！==200）{
警报（'请求失败。返回的状态为'+xhr.status'）；
}
};
发送（新表单数据（document.querySelector（“.login表单”））；
});
});
<form class="login-form" method="post" action="">
header（'Location:admin dashboard.php'）带有回显“成功”
替换：
<script type="text/javascript">
// Wait for the document to load
document.addEventListener("DOMContentLoaded", function(event) {
// Add event listener to form submit
document.querySelector(".login-form").addEventListener("submit", function(e) {
// Prevent the form from being submitted
e.preventDefault();
// Perform displayErrorBlock() function
validateForm();
// Create native XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Set POST request header leaving second parameter empty because PHP
// code is in the same file.
xhr.open('POST', '');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
// Everything was ok, handle response
if (xhr.readyState === 4 && xhr.status === 200) {
// Succesful login. Redirect user
if(xhr.responseText === 'succes'){
window.location.replace("https://your_website.com/admin dashboard.php");
}
// Wrong username / password
else if(xhr.responseText === 'errorUserPass'){
displayErrorBlock("Incorrect Username/Password");
}
// User doesn't exist
else if(xhr.responseText === 'errorNotRegistered'){
displayErrorBlock("Entered Username isn't registered");
}
// Something else was returned by PHP
else {
displayErrorBlock("Unknown error: "+ xhr.responseText);
}
}
// Request failed, alert error
else if (xhr.status !== 200) {
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send(new FormData(document.querySelector(".login-form")));
});
});
</script>
<form class="login-form" method="post" action="">