post2
post3



上面的form要无刷新提交表单,服务器端的$_POST['values']只有选中项的值,但用send...." />
首页 > 代码学习

AJAX表单用POST方式提交Checkbox复选框

发布时间:2011-08-15 15:04:09 来源:星知苑 作者:星之宇

<form action="submit.php" onsubmit="sendPostRequest(); return false;"  
  method="post" encType="multipart/form-data"> 
  <input type="checkbox" name="values[]" value="1" >post1<br> 
  <input type="checkbox" name="values[]" value="2" >post2<br> 
  <input type="checkbox" name="values[]" value="3" >post3<br> 
  <input id="submit" type="submit" value="Submit" name="submit"> 
  </form>
上面的form要无刷新提交表单,服务器端的$_POST['values']只有选中项的值,但用sendPostRequest()提交,不管是否选中选项,$_POST['values]永远包含所有选项的值。[break]
既然AJAX总是提交所有选项的值,那就把选项的值默认设为空,当选中的时候再赋值,就能保证服务器端只接收到选中项的值了。
方法是用一个函数来设置选项的值,把选项的值先保存在alt属性中,当选中时再把值赋值给value就可以了。
<form action="submit.php" onsubmit="sendPostRequest(); return false;"  
  method="post" encType="multipart/form-data"> 
  <input type="checkbox" name="values[]" value="" alt="1" onclick="checkboxValue(this);">post1<br> 
  <input type="checkbox" name="values[]" value="" alt="2" onclick="checkboxValue(this);">post2<br> 
  <input type="checkbox" name="values[]" value="" alt="3" onclick="checkboxValue(this);">post3<br> 
  <input id="submit" type="submit" value="Submit" name="submit"> 
  </form> 
<script language="JavaScript"> 
    function checkboxValue(obj) 
    { 
     if(obj.checked) 
     { 
      obj.value = obj.alt; 
     } 
     else 
     { 
      obj.value = ""; 
     } 
    } 
    </script>

JavaScript页面,post.js保存文件
function createXMLHttp() 
    { 
     var xmlhttp = false; 
     try 
     { 
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
     } 
     catch (e) 
      { 
      try 
      { 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch (E) 
      { 
       xmlhttp = false; 
      } 
     } 

     if (!xmlhttp && typeof XMLHttpRequest != 'undefined') 
     { 
      xmlhttp = new XMLHttpRequest(); 
     } 

     return xmlhttp; 
    } 

    function getRequestBody(oForm) 
    { 
     var aParams = new Array(); 

     for (var i=0 ; i < oForm.elements.length; i++) 
     { 
      var sParam = encodeURIComponent(oForm.elements[i].name); 
      sParam += "="; 
      sParam += encodeURIComponent(oForm.elements[i].value); 
      aParams.push(sParam); 
     } 

     return aParams.join("&"); 
    } 

    function sendPostRequest() 
    { 
     var oForm = document.forms[0]; 
     var sBody = getRequestBody(oForm); 

     var xmlhttp = createXMLHttp(); 
     xmlhttp.open("POST", oForm.action, true); 

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

     xmlhttp.onreadystatechange = function() 
     { 
      if (xmlhttp.readyState == 4) 
      { 
       if (xmlhttp.status == 200) 
       { 
        // success 
       } 
       else 
       { 
        // failed 
       } 
      } 
     }; 

     xmlhttp.send(sBody); 
    }

这样就可以实现无刷新,就可以把表单的值提交

相关合集

  • 十大手机游戏盒子排行榜
十大手机游戏盒子排行榜

简介:手机游戏一直都是很多人的喜欢,特别是可以缓解工作上的各种压力,也是让很多的人成为了游戏的职业玩家,那么当你在玩游戏的时候,要是找不到游戏玩怎么办或者是不知道好的游戏新游戏在哪里下载,还可让你免费玩各种破解的游戏,这里面的游戏盒子肯定是可以解决你的烦恼。