What is wrong with this code? Trying to send data over POST w/ javascript to a PHP page but it isn't sending anything, nothing comes across in the headers $_POST contains nothing.
HTML:
<form method="POST" id="userSub" class="userSub">
<table>
<tr><td colspan="2">Sign In Here </td></tr>
<tr><td>Username:</td><td><input name="username" type="text" id="username" /></td></tr>
<tr><td>Password:</td><td><input name="pwd" type="text" id="pwd" /></td></tr>
<tr><td><input name="submit" type="submit" value="submit" id="submit" onclick="loginSub()" /></td></tr>
<tr><td colspan="2">Need a Username? <a href="signup.html">Sign Up</a></td></tr>
</table>
</form>
Javascript:
function loginSub(){
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("rssnav2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","PHP/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
PHP doesn't do anything special right now, just seeing if I can pass the post information to it:
<?php
echo "test";
$username=$_POST['username'];
echo $username;
?>
It is IS echoing that 'test' line to the correct so it is communicating w/ the PHP page. Also, I know that I still have the pwd input in "text" type and I know its probably a good idea to hash a password before sending it to the server.
Thanks for your help, everyone!
You are not sending parameters in your XMLHttpRequest
. Something like:
var params = "username=user&password=something";
xmlhttp.open("POST", "PHP/login.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
document.getElementById("rssnav2").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(params);
The xmlhttp
doesn't actually have any knowledge of the <form>
, so it won't send any data automatically.
You'll instead have to gather the <form>
's data yourself, format it as URL-encoded, and .send()
it along with the request.
function loginSub(){
var user = document.getElementById('username');
var pass = document.getElementById('pwd');
var postData = [
encodeURIComponent(user.name) + '=' + encodeURIComponent(user.value),
encodeURIComponent(pass.name) + '=' + encodeURIComponent(pass.value)
].join('&');
// ...
xmlhttp.send(postData);
}
For more details, you may want to read through MDN's Using XMLHttpRequest , especially the sections on Using nothing but pure AJAX .
It includes a generalized solution for gathering <form>
data in A little vanilla framework , which you could use with:
<form method="POST" action="PHP/login.php" onsubmit="AJAXSubmit(this); return false;">
Side note:
Your <form>
is likely still submitting as well and may interrupt the Ajax request. You can prevent this by cancelling its onsubmit
event:
<form method="POST" id="userSub" class="userSub" onsubmit="return false">
Also, there are more ways to submit a <form>
than clicking the type="submit"
. For example, most browsers allow submitting by simply tapping Enter while typing in a type="text"
or type="password"
. And, doing so won't typically imitate a click
of the type="submit"
.
So, you'll want to at least consider moving the call out of the onclick
and into the onsubmit
:
<form method="POST" id="userSub" class="userSub" onsubmit="loginSub(); return false;">
Try changing
xmlhttp.send();
to
xmlhttp.send('username='+document.getElementById('username').value);
Of course you will need to put in validation logic.
function loginSub()
{
var xmlhttp = false;
if(window.XMLHttpRequest)
{
if(typeof XMLHttpRequest != 'undefined')
{
try
{
return xmlhttp= new XMLHttpRequest();
}
catch(e)
{
return xmlhttp= false;
}
}
else if( window.ActiveXObject)
{
try
{
return xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e)
{
try
{
return xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e)
{
return xmlhttp = false;
}
}
}
}
var xmlhttp=false;
xmlhttp=createobject();
if(xmlhttp)
{
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('rssnav2').innerHTML = xmlhttp.responseText;
}
}
parameter=username+'='+document.getElementById('usernname').value;
xmlhttp.open('POST','PHP/login.php',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(parameter);
}
}
this will solve your problem
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.