使用 javascript 和 XMLHTTPRequest 将 FormData 发布到 php

2022-01-15 00:00:00 xmlhttprequest php javascript html form-data

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

At the moment I have two files, index.htm and accessdata.php. This is what I have in 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 中的内容:

and this is what I have in accessdata.php:

<?php

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

echo "bla";
?>

现在开始

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

bla"出现，但没有出现blue"或yellow".

"bla" shows up, but not "blue", or "yellow".

我做错了什么?

下面是正确的 HTML 代码！！

THE CORRECT HTML CODE BELOW!!

<!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>

推荐答案

blue 没有显示，因为您在声明:

blue doesn't show up because you are claiming:

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

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

But FormData objects encode data as multipart/form-data.

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

Remove the code that explicitly sets the content-type and let the browser generate it for you. (Don't try to explicitly set it to multipart/form-data, you have to specify what the boundary marker is going to be in the header too).

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

yellow doesn't show up for the same reason, but also because:

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

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

Complicating matters further, your HTML is invalid. Use a validator. You can't have an input as a child of a table row, you need to create a table data cell between them. (Note that it looks like you are trying to use a table for layout, you should probably get rid of the table entirely).

相关文章