Concerning AJAX, PHP, and processing forms
I want to use AJAX to process a simple login form. I thought it'd be pretty easy, but I just can't get it all to work.
index.php
<html>
<head>
<title>AJAX Login</title>
<script type="text/javscript">
var XMLHttpRequestObject = false;
if(window.XMLHttp开发者_高级运维Request) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function logIn() {
if(XMLHttpRequestObject) {
var obj = document.getElementById("show");
XMLHttpRequestObject.open("GET", "login.php");
XMLHttpRequestObject.onreadystatechange = function() {
if(XMLHttpRequestObject.readyState == 4
&& XMLHttpRequestObject.status == 200) {
obj.innerHtml = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="username" name="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" \ /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="login" onclick="logIn();" /></td>
</tr>
</table>
</form>
<div id="show">should go here</div>
</body>
</html>
login.php
<?php
$username = "andrew";
$password = "andrew";
if($_POST['username'] != "") {
if($_POST['password'] != "") {
if(($_POST['username'] == $username) && ($_POST['password'] == $password)) {
echo "Login Success!";
}
else {
echo "Login Failure!";
}
}
else {
echo "You didn't enter a password";
}
}
else {
echo "You didn't enter a username";
}
?>
When I click the "Login" button, nothing happens. :(
When you click login on that form it submits back to the source URL. To prevent this you should really change your event handler to either this:
function logIn() {
...
return false;
}
Alternatively you can do it from the submit handler on the form instead of the click handler on the submit button.
Secondly, to do AJAX cross-browser you need about 6 fallback conditions, not just XmlHttpRequest. See Getting Started with AJAX and the XMLHttpRequest Object.
In all honesty, for AJAX there's no way I'd consider doing it without a helper library. My preferred choice is jQuery, in which case the code ends up looking like this:
<form id="loginform" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="username" id="username" name="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" name="password" \ /></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="login" value="Login"/></td>
</tr>
</table>
</form>
with:
<script type="text/javascript">
$(function() {
$("#login").click(function() {
$("#show").load("login.php", {
username: $("#username").val(),
password: $("#password").val()
}, function() {
$("#loginform").hide(); // for example
});
});
});
</script>
Your PHP script is expecting variables to be passed as an HTTP POST request, but your XMLHTTPRequest is doing a GET request.
You're also doing XMLHttpRequestObject.send(null); -- instead, you should be passing your POST data to the .send() method.
As others have pointed out, using a JavaScript library like jQuery will make this kind of thing a lot simpler.
You are not calling the logIn() function anywhere. Most likely, it belongs into the onsubmit event of the form. Don't forget to
return false;
at the end.
加载中,请稍侯......
精彩评论