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

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

良心推荐

学做饭的软件哪个好
  • 学做饭app
  • 家常菜app
  • 网上厨房手机版下载
  • 食谱app
  • 嘻哈菜谱最新版
  • 下厨房最新版下载
生活中总是少不了需要做饭煮菜的,只要是学会了做饭不管是男生追女生或只是女生想要留住男生的胃,更多的是可以让你在不同的做饭软件上面学会不同的菜色,而且这里也是收集了很多煮菜视频都是免费看,没有广告的让你可以轻松的掌握的做菜的技巧,相当的好用结合了很多教学,都是很详细的。

相关资讯