这是我的index.html页面代码:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</meta>
<title>School</title>
<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div style="margin:auto; width:1000px;">
<div class="flt topblock"> <a href="" class="flt1 tp_txtplay">Play School</a>
<br/><br/>
<div>
<form id='myform' method='post' action='welcome.php' >
<span class="flt1 lp_txtlog">Email ID</span>
<input name="username" type="text" id="username" class="flt lp_textbox" />
<br />
<span class="flt1 lp_txtlog2">Password</span>
<input name="password" type="password" id="password" class="flt lp_textbox2" />
button id="submit" class='flt lp_button'>Login</button>
</form>
<div id="ack"></div>
</div>
</div>
</div>
</body>
</html>
这是my_script.js代码:-
$("button#submit").click(function() {
if ($("#username").val() == "" || $("#password").val() == "")
$("div#ack").html("Please enter both username and password");
else
$.post($("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(data) {
$("div#ack").html(data);
});
$("#myForm").submit(function() {
return false;
});
});
下面是我的welcome.php代码:-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<?php
$con = mysql_connect('localhost', 'root', 'Wahegurug@9');
mysql_select_db('test', $con);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
$sql = "SELECT * FROM user ";
$res = mysql_query($sql);
if ($row = mysql_fetch_array($res)) {
if ($row['Username'] == $_POST['username']) {
if ($row['Password'] == $_POST['password']) {
echo'login successful';
} else {
echo'login failed';
}
}
}
?>
</body>
</html>
详细信息是:-我在Netbeans 7.3中使用xampp服务器制作了这个项目。我创建了一个简单的登录页面,并试图使用javascript来防止在输入错误凭据时提交页面。
在my_script.js中,我使用id为ack的div向用户显示成功或错误消息。
我的问题是,即使输入了错误的凭据,用户仍然被重定向到welcome.php(我表单的目标(。我该如何防止这种情况发生?
您需要做的是阻止默认操作。
更改
$("button#submit").click( function() {
至
$("button#submit").click( function(event) {
event.preventDefault();
此外,您在这里明确地调用了提交函数:
$("#myForm").submit(function() {
return false;
});
尝试删除此代码,它可能会在$.post调用完成之前解决
最后,您的jquery代码应该封装在一个document.ready块中。。。
$(document).ready(function(){
$("button#submit").click(function(event) {
event.preventDefault();
if ($("#username").val() == "" || $("#password").val() == "")
$("div#ack").html("Please enter both username and password");
else
$.post($("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(data) {
$("div#ack").html(data);
});
});
});
至于你的welcome.php页面,这可能会更好地为你服务。
<?php
$con = mysql_connect('localhost', 'root', 'Wahegurug@9');
mysql_select_db('test', $con);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
$sql = "SELECT * FROM user where Username = '".mysql_real_escape_string($_POST["username"])."'";
$res = mysql_query($sql);
if ($row = mysql_fetch_array($res)) {
if ($row['Password'] == $_POST['password']) {
echo'login successful';
return;
}
}
echo'login failed';
?>
这只会获取并检查有问题的用户的密码,并且在所有情况下都会返回失败。另外,我删除了框架页面标记,因为它被注入到现有页面中。
$(document).ready(function(){
$("button#submit").click(function(event) {
var is_send=true;
var username=$("#username").val();
var password=$("#password").val();
if (username == "" || $(password == "")
{
$("div#ack").html("Please enter both username and password");
is_send=false;
}
else
$.post($("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(data) {
$("div#ack").html(data);
});
if(is_send==false)
{
return false;
}
});
});
试试这个,它对我有用…
您可以这样尝试。
$("button#submit").click( function(e) {
e.preventDefault();//Will prevent the default event of click
});