使用 javascript 和 XMLHTTPRequest 将 FormData 发布到 php答案

【问题标题】：POST FormData to php using javascript and XMLHTTPRequest使用 javascript 和 XMLHTTPRequest 将 FormData 发布到 php
【发布时间】：2015-09-15 03:17:00
【问题描述】：

目前我有两个文件，index.htm 和 accessdata.php。这就是我在 index.htm 中的内容：

<html>
<head>
<script>
function postData() {
  var xmlhttp=new XMLHttpRequest();
  var url = "accessdata.php";
  var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));

  xmlhttp.open("POST",url,true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send(checkBoxes_formData);

  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
  }
}
</script>

</head>

<body>
<button type="button" onclick="postData()">POST</button>

<form id=checkBoxes>
<table>
    <tr><input type="checkbox" name="opt1" value="blue" checked> Blue</td>
    <tr><input type="checkbox" name="opt2" value="yellow"> Yellow</td> 
</table>
</form>

<p id="result"></p>

</body>
</html>

这就是我在 accessdata.php 中的内容：

<?php

$opt1=$_POST['opt1'];
echo $opt1;

echo "bla";
?>

现在开始

<p id="result"></p>

“bla”出现，但没有出现“blue”或“yellow”。

我做错了什么？

下面是正确的 HTML 代码！！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POST PHP XMLHTTPRequest</title>
<script>
function postData() {
  var xmlhttp=new XMLHttpRequest();
  var url = "accessdata.php";
  var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));

  xmlhttp.open("POST",url,true);
  xmlhttp.send(checkBoxes_formData);

  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
  }
}
</script>

</head>

<body>
<button type="button" onclick="postData()">POST</button>

<form id="checkBoxes">
<input type="checkbox" name="opt1" value="blue"> Blue
<input type="checkbox" name="opt2" value="yellow" checked> Yellow

</form>

<p id="result"></p>

</body>
</html>

【问题讨论】：

用关闭表单
好的，已经这样做了，我在构建示例代码时的错误，仍然无法正常工作。
我从未使用过FormData，但似乎您不应该设置内容类型。无论如何，检查返回的 FormData 是什么形式。我将开始回显整个 $_POST 数据。但在您可以console.log(checkboxes_formData) 之前，这通常有助于了解发生了什么。

标签： javascript php html xmlhttprequest form-data

【解决方案1】：

blue 没有出现，因为您在声明：

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

但是FormData 对象将数据编码为multipart/form-data。

删除显式设置内容类型的代码，让浏览器为您生成它。（不要尝试将其显式设置为multipart/form-data，您还必须在标题中指定边界标记的内容）。

yellow 没有出现同样的原因，也是因为：

您只查看opt1，它与名称opt2 相关和
复选框控件只有在被选中时才会成功（即将在提交的数据中）（默认情况下不选中黄色）。

更复杂的是，您的 HTML 无效。 Use a validator。您不能将输入作为表格行的子项，您需要在它们之间创建一个表格数据单元格。（请注意，您似乎正在尝试使用表格进行布局，您可能应该完全摆脱表格）。

【讨论】：

我不知道有可用的验证器！哇，这太棒了！我将修改代码并编辑帖子，以便验证器尽可能少地给出错误。
该表用于在不同的列中放置许多复选框，大约 30 个。我不知道如果输入位于同一表行内，它将不起作用。删除了表和行 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");然后它起作用了。
"删除显式设置内容类型的代码，让浏览器为您生成。"这成功了。谢谢！

【解决方案2】：

点按即可创建笔记你应该试试这个……

<form method=post action=accessdata.php>
    <input type=checkbox value=blue name=opt1>blue
    <input type=submit value=submit name=send>
</form>

在访问数据中。 PHP

if❨isset❨$_POST[`send']❩❩ {
    $color=$_POST[`opt1'];
    echo $color."bala";
}

【讨论】：

你有一个语法错误，所以它不会工作......它并没有做问题中的代码试图做的事情。