使用 javascript 和 XMLHTTPRequest 将 FormData 发布到 php [英] POST FormData to php using javascript and XMLHTTPRequest
问题描述
目前我有两个文件，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).
这篇关于使用 javascript 和 XMLHTTPRequest 将 FormData 发布到 php的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
