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>