php - 使用 javascript 发送 POST

Question

这段代码有什么问题？尝试使用 javascript 通过 POST 将数据发送到 PHP 页面，但它没有发送任何内容， header $_POST 中没有任何内容，不包含任何内容。

HTML:

<form method="POST" id="userSub" class="userSub">
<table>
    <tr><td colspan="2">Sign In Here&nbsp;</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;
?>

它正在将“测试”行回显到正确的位置，因此它正在与 PHP 页面进行通信。另外，我知道我仍然有“文本”类型的密码输入，并且我知道在将密码发送到服务器之前对其进行哈希处理可能是个好主意。

谢谢大家的帮助!

Answer 1

xmlhttp实际上对 <form> 没有任何了解，因此它不会自动发送任何数据。

您必须收集 <form>自己的数据，将其格式化为 URL 编码，然后 .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 ，特别是关于 Using nothing but pure AJAX 的部分.

它包括一个通用的收集解决方案<form>数据在 A little vanilla framework ，您可以将其与以下内容一起使用:

<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" 时只需点击 Enter 即可提交。或type="password" 。而且，这样做通常不会模仿 click type="submit"的.

因此，您至少要考虑将调用移出 onclick并进入onsubmit :

<form method="POST" id="userSub" class="userSub" onsubmit="loginSub(); return false;">