JavaScript AJAX preventDefault
我正在制作一个简单的登录页面(由PHP和MySQL支持)，以了解更多关于JavaScript和AJAX的信息。我让它处理一个没有提交按钮的表单，只是一个带有onclick方法调用的按钮。然而，我希望它是一个提交按钮，所以点击enter将调用函数，这似乎是正确的方式来做任何事情。经过没完没了的研究，并试图翻译jQuery解决方案，我仍然无法阻止表单提交默认。
如果我用测试数据填写表单并提交，它会在url中提交带有"?username=test&password=test&submit=Log+In“的表单，然后重新加载页面，而不会显示来自服务器的消息。为什么事件preventDefault不能工作？我也尝试过使用submit事件将事件侦听器添加到form元素。
<?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>回答 1
Stack Overflow用户
发布于 2016-06-25 19:47:08
document.getElementById('login_btn').addEventListener('click'，登录(事件)；
您正在立即调用login ，并尝试使用其返回值(undefined，因为它没有返回语句)作为事件处理程序。
将(event)从那里移除。
…至少，如果你不想打电话给null.addEventListener，那就会发生什么。有关浏览器，请参阅这个问题和了解如何使用开发人员工具，以便您可以看到来自JavaScript的错误消息。
https://stackoverflow.com/questions/38032334
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号