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

时间:2012-07-27 04:43:55

标签: php mysql html ajax

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

我知道如何在没有ajax调用的情况下通过简单的表单提交,使用像groups []这样的变量作为数组,并在php中为数组中的每个值运行foreach循环。

如何通过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"; 
      } 
  }


 ?>

2 个答案:

答案 0 :(得分:3)

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'];

答案 1 :(得分:0)

你可以用两种方式做到这一点,

  1. 您可以使用帖子类型ajax调用

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

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