使用JavaScript和XMLHTTPRequest將FormData發布到php

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”，但不顯示“ 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>

Answer 1

由於您聲稱blue未顯示：

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

但是FormData對象將數據編碼為multipart/form-data 。

刪除明確設置內容類型的代碼，然后讓瀏覽器為您生成它。 （不要嘗試將其顯式設置為multipart/form-data ，您也必須指定邊界標記將在標頭中顯示）。

yellow的原因並非相同，原因還在於：

您只查看opt1 ，它與名稱opt2 和
復選框控件只有在被選中時才成功（即，將存在於提交的數據中）（默認情況下，黃色復選框未選中）。

更麻煩的是，您的HTML無效。 使用驗證器。 您不能將輸入作為表行的子級，您需要在它們之間創建一個表數據單元格。 （請注意，您似乎正在嘗試使用表格進行布局，因此您可能應該完全刪除表格）。

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 個解決方案

解決方案1
7 已采納 2015-06-28 18:10:24

解決方案2
-1 2015-06-28 18:02:55

使用JavaScript和XMLHTTPRequest將FormData發布到php

問題描述

2 個解決方案

解決方案1 7 已采納 2015-06-28 18:10:24

解決方案2 -1 2015-06-28 18:02:55

解決方案1
7 已采納 2015-06-28 18:10:24

解決方案2
-1 2015-06-28 18:02:55