POST FormData для php с использованием javascript и XMLHTTPRequest

На данный момент у меня есть два файла: 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>

blue не появляется, потому что вы утверждаете:

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

Но объекты FormData кодируют данные как multipart/form-data .

Удалите код, который явно задает тип содержимого и позволяет браузеру генерировать его для вас. (Не пытайтесь явно установить его в multipart/form-data , вы должны указать, какой граничный маркер будет в заголовке тоже).

yellow не появляется по той же причине, но также потому, что:

Вы смотрите только на opt1 и ассоциируется с именем opt2 и
Элементы управления флажком успешны (т. Е. Будут попадать в данные, которые отправляются), если они проверены (что по умолчанию желтый).

Усугубляя ситуацию, ваш HTML недействителен. Используйте валидатор . У вас не может быть вход как дочерний элемент строки таблицы, вам нужно создать ячейку таблицы данных между ними. (Обратите внимание, что похоже, что вы пытаетесь использовать таблицу для макета, вы, вероятно, должны полностью избавиться от таблицы).

Нажмите, чтобы создать заметку. Попробуйте это …

 <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"; }