Javascript Jquery随机停止工作
好的，我整天都在编写一个jQuery脚本，主要是调整它以使错误正确地显示出来，突然之间——代码停止了工作。表单没有提交或其他任何内容 下面我已经包括了代码；我假设它是jQuery端的某个东西，即google或其他什么东西，因为我将代码还原为上一个工作配置，但仍然没有得到任何东西 编辑：没有控制台错误，jQuery没有提交。这就是我面临的问题Javascript Jquery随机停止工作,javascript,jquery,html,Javascript,Jquery,Html,好的，我整天都在编写一个jQuery脚本，主要是调整它以使错误正确地显示出来，突然之间——代码停止了工作。表单没有提交或其他任何内容 下面我已经包括了代码；我假设它是jQuery端的某个东西，即google或其他什么东西，因为我将代码还原为上一个工作配置，但仍然没有得到任何东西 编辑：没有控制台错误，jQuery没有提交。这就是我面临的问题 <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jque
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Login Test</title>
<link rel='stylesheet' href='theme/default/style.css' />
</head>
<div id='alert' class='hidden'>
Error
</div>
<body>
<div id='welcome_holder'>
<table cellpadding="0" cellspacing="0" id='welcome'>
<form method='post' action='actionlog.php' id='login'>
<tr>
<th colspan='3'><h3>Citizen Login</h3></th>
</tr>
<tr>
<td class='user'>Username</td><td class="user">:</td><td class="user"><input type='text' name='username' id='username'></td></tr>
<tr>
<td class='pass'>Password</td><td class="pass">:</td><td class="pass"><input type='password' name='password' id='password'></td>
</tr>
<tr><th colspan='3'><input type='submit' /></th></tr>
<tr><th colspan='3'><span style='font-size: 12px;'>Don't have an account? <a href='register.php'>Register Today!</a><br /> Forgotten Password/Username?</span></th>
</tr>
</form>
</table>
</div>
<script type='text/javascript'>
$('#login').submit(function() {
$.ajax({
url: 'actionlog.php',
type: 'POST',
data: {
username: $('#username').val(),
password: $('#password').val()
},
success: function(data) {
if(data == 'true')
{ location.reload(); }
else
{
$('#alert').addClass('show');
}
}
});
return false;
});
</script>
代码有几个问题，第一件事是在文档准备好后绑定到dom事件。最重要的是，在提交表单时，您需要使用event.preventDefault阻止事件。这将停止浏览器使用表单的方法执行表单操作，也就是发布到url。我已更新代码以反映这些更改，还修复了基于对您问题的评论的HTML
<html>
<head>
<title>Login Test</title>
<link rel='stylesheet' href='theme/default/style.css' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
// use $(document).ready(function(){})
// $(function(){}) is a shortcut for ready function
$(function(){
$('#login').submit(function(e) {
// stop the form from submitting and allow the ajax to run
e.preventDefault();
$.ajax({
url: 'actionlog.php',
type: 'POST',
data: {
username: $('#username').val(),
password: $('#password').val()
},
success: function(data) {
if(data == 'true')
{
location.reload();
}
else
{
$('#alert').addClass('show');
}
}
});
return false;
});
});
</script>
</head>
<body>
<!-- alert div needs to be in body tag -->
<div id='alert' class='hidden'>Error</div>
<div id='welcome_holder'>
<!-- form outside of table -->
<form method='post' action='actionlog.php' id='login'>
<table cellpadding="0" cellspacing="0" id='welcome'>
<tr>
<th colspan='3'><h3>Citizen Login</h3></th>
</tr>
<tr>
<td class='user'>Username</td>
<td class="user">:</td>
<td class="user"><input type='text' name='username' id='username'></td>
</tr>
<tr>
<td class='pass'>Password</td>
<td class="pass">:</td>
<td class="pass"><input type='password' name='password' id='password'></td>
</tr>
<tr>
<td colspan='3'><input type='submit' /></td>
</tr>
<tr>
<td colspan='3'>
<span style='font-size: 12px;'>Don't have an account? <a href='register.php'>Register Today!</a><br /> Forgotten Password/Username?</span>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
为什么在主体之外有alert div？控制台对此有何解释？与其将表单放在表中，不如将表放在表单中。html无效。尝试将其正确格式化，然后运行。如果问题仍然存在，请查看控制台F12中的错误，并将其作为问题的一部分提供。请尝试其他浏览器。也许您的已在8:35更新，并按预期停止解释无效标记？