<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); }
这样就可以实现无刷新,就可以把表单的值提交