Question

目前我有两个文件，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”出现，但不是“蓝色”或“黄色”。

我做错了什么？

以下正确的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>

Answer 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。您不能将输入作为表行的子项，您需要在它们之间创建表数据单元格。（请注意，看起来您正在尝试使用表格进行布局，您应该完全摆脱表格。）

Answer 2

点按即可创建便笺你应该试试这个......

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

在accessdata中。 PHP

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

使用javascript和XMLHTTPRequest将FormData发布到php

2 个答案: