【问题标题】：sending POST data with JavaScript (xhttp) (ajax)使用 JavaScript (xhttp) (ajax) 发送 POST 数据
【发布时间】：2018-02-01 09:16:00
【问题描述】：

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();

    var a = document.getElementById("name").value;
    var b = document.getElementById("message").value;
    var postdata = "name=a&message=b"; //Probably need the escape method for values here, like you did

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "/chat/backend-input.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send(postdata);
}
</script>

<form onsubmit="loadDoc()">
Name: <input type="text" name="name" id="name"><br>
Message: <input type="text" name="message"><br>
<input type="submit"></input>
</form>

为什么这段代码不起作用？我是不是做错了什么，当我按下提交按钮时，它没有从表单中发布数据

谁能解释我哪里出错了？

编辑：它不是输出形式中的内容，而是输出 a 和 b。

【问题讨论】：

Send POST data using XMLHttpRequest的可能重复
你没有取消表单提交
你看控制台了吗？它说什么？ ----- 另外，将id 添加到<input type="text" name="message" id="message">
我添加了那个ID，我错过了，但它仍然不起作用！
它正在输出 a 和 b... 而不是表单中的内容

标签： javascript jquery ajax http https

【解决方案1】：

首先，不要忘记将id="message" 添加到以下行：Message: <input type="text" name="message" id="message"><br>。

发布数据

你会的

var postdata = "name=a&message=b";
// ...
xhttp.send(postdata);

所以您发布的值实际上是"a" 和"b"。

您需要将a 和b 变量的值添加到postdata。简单的字符串连接就可以了，但在你需要转义它们之前（使用encodeURIComponent()）以防它们有特殊字符。

所以，请尝试以下方法来修复它。改变：

var postdata = "name=a&message=b";

收件人：

var postdata = "name=" + encodeURIComponent(a) + "&message=" + encodeURIComponent(b);

它应该可以工作。

【讨论】：