使用 javascript Ajax 而不是 jQuery 将复选框值发送到 PHP 页面

Question

我有一种情况，我需要对通过发送到 php 脚本的 ajax 请求选择的每个复选框进行插入查询，该脚本将在 mysql 中进行插入。

我知道如何在没有 ajax 调用的情况下通过简单的表单提交来做到这一点，将变量（如 groups[] 作为数组）并在 php 中为数组中的每个值运行 foreach 循环。

如何通过 post ajax 请求发送数组？

示例代码：

<input type='checkbox' name='groups[]' value='1'>Group A
<input type='checkbox' name='groups[]' value='2'>Group B
<input type='checkbox' name='groups[]' value='3'>Group C

请帮忙，我知道这可能很容易，但我就是不明白。伙计们，请不要给出任何 jquery 或之类的示例，因为我想要纯 html、javascript 和 php 解决方案。

感谢社区...

这里是 Javascript 函数：

<script type='text/javascript'>
function addResp(tid){

a = encodeURIComponent(document.getElementById('course_add_resp').value);
b = encodeURIComponent(document.getElementById('term_add_resp').value);
c = encodeURIComponent(document.getElementById('paper_add_resp').value);

var elements = document.getElementsByName('groups[]');  
var data = [];
for (var i = 0; i < elements.length; i++){
if (elements[i].checked){
    data.push('groups[]='+elements[i].value);
   }
}
params = "tid="+tid+"&course="+a+"&sem="+b+"&paper="+c+"&grp="+data;
if (window.XMLHttpRequest)
 {
xmlhttp=new XMLHttpRequest();
 }
else
   {
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.body.removeChild(document.getElementById('respBackground'));
document.body.removeChild(document.getElementById('respBox'));      
contents = xmlhttp.responseText;    
if(contents == "done"){
window.location = "teachers.php";
} else{
document.getElementById("studentBox").innerHTML = "There was a problem serving the     request.";
 }

    }
  }
 xmlhttp.open("POST","assignresp.php",true);
 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xmlhttp.send(params);

 }

</script>

和 php 脚本：

  <?php

  $tid = mysql_real_escape_string($_POST['tid']);
  $cid = mysql_real_escape_string($_POST['course']);
  $sem = mysql_real_escape_string($_POST['sem']);
  $paper = mysql_real_escape_string($_POST['paper']);
  $session = 12;
  $type = 1;

  $groups = $_POST['grp'];

  foreach ($groups as $value ) {
      $q1 = "insert into iars(sessionid,teacherid,courseid,semester,paperid,groupid,type)    values('$session','$tid','$cid','$sem','$paper','$value','$type')";
      $r1 = mysql_query($q1) or die(mysql_error());
      if(mysql_affected_rows() > 0){
          echo "done";
      }
      else{
          echo "fail"; 
      } 
  }


 ?>

Answer 1

var elements = document.getElementsByName('groups[]');  
var data = [];
for (var i = 0; i < elements.length; i++){
    if (elements[i].checked){
        data.push('groups[]='+elements[i].value);
    }
}
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data.join('&'));
//for get
//xmlhttp.open("GET",url+"?"+data.join('&'),true);
//xmlhttp.send();

编辑

改变这两行。

params = "tid="+tid+"&course="+a+"&sem="+b+"&paper="+c+"&"+data.join('&');

$groups = $_POST['groups'];

Answer 2

你可以通过两种方式做到这一点，

1. 可以使用post型ajax调用

2. 您可以使用 JavaScript 获取所有选中的复选框值，使逗号分隔的字符串并将其传递到一个变量中

这就是你所能做的...... :)