登录页登录button
制作一个登录页时,我们需要对登陆用户输入的账号和密码与数据库匹配,验证其账号和密码的正确,这个时候会遇到一个问题,登录按钮类型是用submit还是button呢
<input type="submit" value="登录"/>
<input type="button" value="登录"/>
我建议type是button,因为如果是submit的话,在我们点击按钮时form表单是会自动提交数据到action所指定的页面的,但是一般情况下我们是需要判断用户输入的内容的准确性的,这样会使我们的弹出层失效。我们可以把类型改为button,通过为button绑定一个点击事件,通过它来判断用户是否有输入和输入的数据是否准确。
<form id="goto" class="form-signin" action="../index.html" method="post">
<h3 class="form-signin-heading">欢迎登录<br />新闻发布和管理系统后台</h3>
<input id="number" type="text" class="form-control" placeholder="请输入账号" required="required" autofocus="autofocus"/>
<input id="password" type="password" class="form-control" placeholder="请输入密码" required="required"/>
<input type="button" value="登录"/>
</form>
获取用户输入的账号和密码
var number = $("#number").val();
var password = $("#password").val();
实现效果如下
$("#btn").click(function(){
var number = $("#number").val();
var password = $("#password").val();
$.post("../Model/Admin.php", {number: number, password: password}, function(res){
if (res == 10) {
//jg_error.style.display = "inline";
showAndHide('jg_error','show');
} else{
$("#goto").submit();
}
});
}
通过php连接数据库,将数据与数据库内的信息相匹配
$number = $_POST['number'];
$password = $_POST['password'];
require_once '../database.php';
$pdo = new PDO(DSN, USER, PASS);
if (empty($pdo)) {
die;
}
$sql = "select adminid from admin where number='{$number}' and password='{$password}'";
$result = $pdo->query($sql);
$stmt = $result->fetchAll(PDO::FETCH_ASSOC);
if (empty($stmt))
{
echo "10";
}
else {
echo $stmt[0]['adminid'];
}
注意一点就是,button类型是无法实现表单的提交的,我们可以通过以下方式来实现
$("#goto").submit();
或者通过出发隐藏域来实现
<input type="submit" id="" style="display: none;" value="" />
$("input[type=submit]").trigger("click");