我正在登录以管理用户以及使用 PHP、HTML、CSS 的数据库。起初,我想将表单的提交按钮发送到一个 php 文件来完成整个过程,但我希望一切都异步完成。
我一直在互联网上寻找一些教程,据我所知,有很多使用 Ajax 和 jQuery 的教程,因为我是这两种技术的初学者。我的想法如下:
从 index.php 开始,表单不会有动作,而是 jQuery 会调用 php 文件(尚未完成)来负责管理进程。
index.php 代码:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- CSS imports -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
<!-- JQuery include -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/loginForm.js"></script>
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<!-- Navigation Bar content -->
<nav class="navBar">
<ul>
<li><a class="hover" href="index.php">Index</a></li>
</ul>
</nav>
<!-- Body content -->
<div class="bodyContainer">
<!-- Form -->
<div class="formContainer">
<p class="formTitle">Login form</p>
<form id="loginForm" method="post">
<div class="formDataContainer">
<div id="error"><!-- Error will be shown here ! --></div>
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<button type="submit" id="btnLogin">Sing in</button>
<button type="button" id="registerBtn" onclick="location.href='models/registerForm.php';">Register</button>
</div>
</form>
</div>
</div>
</body>
</html>
依次使用 jQuery 和 Ajax 的该功能将通过输入来更改“登录(提交)”按钮...如果 Ajax(POST)的请求正确,则登录。
Ajax 代码——jQuery(基于教程)
$('document').ready(function() {
/* login submit */
function submitForm() {
var data = $("#loginForm").serialize();
$.ajax({
type: 'POST',
url: 'php/loginProcess.php',
data: data,
beforeSend: function() {
$("#error").fadeOut();
$("#btnLogin").html('Sending ...');
},
success: function(response) {
if (response == "ok") {
$("#btnLogin").html('Signing In ...');
setTimeout(' window.location.href = "home.php"; ', 4000);
} else {
$("#error").fadeIn(1000, function() {
$("#error").html(response);
$("#btnLogin").html('Sign In');
});
}
}
});
return false;
}
/* login submit */
});
问题是当你按下提交按钮时,什么也没有发生。它根本不发出请求,我试图让 php 文件显示一些示例,但没有结果。
你知道我该如何解决吗?
PS:
文件夹的路径是:
DirProyecto
php
archivos.php
js
jQueryScript.js
css
index.php
修改:
从提交按钮中删除
onclick
,使按钮如下所示:使用如下选择器调用膏油涂抹
jQuery
:使
id
表单与选择器的匹配jQuery
这是工作代码
查看代码我发现了问题(这很愚蠢)。
我创建了一个从未调用过的函数,因为脚本代码有一个验证部分,我没有在我的案例中使用。
删除该代码不会调用 jQuery 函数。
删除该功能,我已经正确解决了它,现在它加载了所有内容。