0
私は、JavaScriptとAJAXの詳細については、簡単なログインページ（PHPとMySQLのサポート）を作っています。私は、送信ボタンなしのフォーム、onclickメソッド呼び出しのボタンだけで作業していました。しかし、私はそれを送信ボタンにしたいので、enterを押すと関数が呼び出されます。それはとにかくやり方をする正しい方法のようです。無限の調査とjQueryソリューションの翻訳を試みた後、私は依然としてフォームがデフォルトで送信されるのを止めることができません。JavaScript AJAX preventDefault
フォームにテストデータを入力して送信すると、URLに「？username = test & password = test & submit = Log + In」というフォームが送信され、メッセージは表示されずにページがリロードされますサーバー。イベントpreventDefaultが機能しないのはなぜですか？また、submitイベントを使ってフォームリスナーに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>