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

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

良心推荐

手机助手哪个好用推荐
  • 兔兔助手ios下载
  • PP助手下载安卓版
手机成为生活中不可少的一部分,但是你可能会使用手机,但是不一定就是了解手机,还是需要一款好用的手机助手来帮助你,不仅是可以让你使用中更加的熟练,还能知晓各种手机的相关的信息,不管是硬件的还是软件的,小编推荐几款2021流行好用的手机助手给你。

相关资讯