[英]Sending POST with javascript
这段代码有什么问题? 尝试通过POST w / javascript将数据发送到PHP页面,但它没有发送任何内容,标题中没有任何内容。$ _POST不包含任何内容。
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现在没有做任何特别的事情,只是看看我是否可以将帖子信息传递给它:
<?php
echo "test";
$username=$_POST['username'];
echo $username;
?>
IS回显“测试”行正确,因此它与PHP页面进行通信。 另外,我知道我仍然有“text”类型的pwd输入,我知道在将密码发送到服务器之前散列密码可能是个好主意。
谢谢大家的帮助!
您没有在XMLHttpRequest
发送参数。 就像是:
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);
xmlhttp
实际上并不知道<form>
,因此它不会自动发送任何数据。
你需要自己收集<form>
的数据,将其格式化为URL编码,然后将.send()
与请求一起.send()
。
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);
}
有关更多详细信息,您可能需要阅读MDN的Using XMLHttpRequest ,尤其是有关使用除纯 AJAX之外的部分的内容。
它包含一个通用的解决方案,用于在一个小的vanilla框架中收集<form>
数据,您可以使用它:
<form method="POST" action="PHP/login.php" onsubmit="AJAXSubmit(this); return false;">
边注:
您的<form>
可能仍在提交,可能会中断Ajax请求。 您可以通过取消其onsubmit
事件来防止这种情况:
<form method="POST" id="userSub" class="userSub" onsubmit="return false">
此外,还有更多方法可以提交<form>
不是单击type="submit"
。 例如,大多数浏览器只需在键入type="text"
或type="password"
点击Enter即可进行提交。 而且,这样做通常不会模仿click
的的type="submit"
。
因此,您至少需要考虑将调用移出onclick
并进入onsubmit
:
<form method="POST" id="userSub" class="userSub" onsubmit="loginSub(); return false;">
尝试改变
xmlhttp.send();
至
xmlhttp.send('username='+document.getElementById('username').value);
当然,您需要输入验证逻辑。
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);
}
}
这将解决您的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.