0
我正在制作一个简单的登录页面（由PHP和MySQL支持）以了解关于JavaScript和AJAX的更多信息。我使用没有提交按钮的表单工作，只是一个带有onclick方法调用的按钮。但是，我希望它是一个提交按钮，因此按Enter键将调用该函数，而这似乎是正确的方式来处理事情。经过无尽的研究和尝试翻译jQuery解决方案，我仍然无法阻止表单默认提交。JavaScript AJAX preventDefault
如果我填写测试数据表格并提交，其提交与形式“？用户名=测试&密码=测试&提交=登录+在” URL，然后重新加载页面，而不显示消息服务器。为什么不是事件preventDefault正常工作？我也尝试过使用提交事件将eventlistener添加到表单元素。
<?php
session_start();
if (isset($_SESSION['user']))
header("Location: home.php");
?>
<html>
<head>
<script>
document.getElementById('login_btn').addEventListener('click', login(event));
var request = new XMLHttpRequest();
function login(evt) {
evt.preventDefault();
var username = encodeURIComponent(document.getElementById('username').value);
var password = encodeURIComponent(document.getElementById('password').value);
request.open('POST', 'login.php', true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = process_login;
request.send('username=' + username + '&password=' + password);
}
function process_login() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseXML;
var message = response.getElementsByTagName('message').item(0).firstChild.nodeValue;
if (message == '')
window.location = 'home.php';
else
document.getElementById('message').innerHTML = '<b>' + message + '</b>';
}
}
}
</script>
<title>Log In</title>
</head>
<body>
<h2>Please Log In</h2>
<form>
<table>
<tr><td>Username:</td><td><input type="text" name="username" id="username"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password" id="password"></td></tr>
<tr><td><input id="login_btn" type="submit" name="submit" value="Log In"></td></tr></form>
<tr><td colspan="2"><div id="message" /></td></tr>
</table>