AJax技术

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

字号+ 作者:H5之家 来源:H5之家 2017-02-20 09:01 我要评论( )

form action=submit.php onsubmit=sendPostRequest(); return ...

<form action="submit.php" onsubmit="sendPostRequest(); return false;" method="post" encType="multipart/form-data"> <input type="checkbox" value="1" >post1<br> <input type="checkbox" value="2" >post2<br> <input type="checkbox" value="3" >post3<br> <input type="submit" value="Submit"> </form>

上面的form要无刷新提交表单,服务器端的$_POST['values']只有选中项的值,但用sendPostRequest()提交,不管是否选中选项,$_POST['values]永远包含所有选项的值。
既然AJAX总是提交所有选项的值,那就把选项的值默认设为空,当选中的时候再赋值,就能保证服务器端只接收到选中项的值了。
方法是用一个函数来设置选项的值,把选项的值先保存在alt属性中,当选中时再把值赋值给value就可以了。

<form action="submit.php" onsubmit="sendPostRequest(); return false;" method="post" encType="multipart/form-data"> <input type="checkbox" value="" alt="1">post1<br> <input type="checkbox" value="" alt="2">post2<br> <input type="checkbox" value="" alt="3">post3<br> <input type="submit" value="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); }


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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评