生活随笔
收集整理的這篇文章主要介紹了
解决AJAX表单用POST方式提交Checkbox复选框的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用AJAX的POST方式提交表單，函數如下：
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)????????{?????????????????}????????else????????{?????????????????}???????}??????};???????xmlhttp.send(sBody);?????}? 一個含有復選框的表單：
<form?id="Reg-form"?name="Reg-form"?onsubmit="sendPostRequest();?return?false;"????action="submit.php"?method="post"?encType="multipart/form-data">???<input?type="checkbox"?name="os[]"?value="1"?autocomplete="off">Linux<br>???<input?type="checkbox"?name="os[]"?value="2"?autocomplete="off">Mac?OS<br>???<input?type="checkbox"?name="os[]"?value="3"?autocomplete="off">Windows<br>???<input?id="submit"?type="submit"?value="Submit"?name="submit">???</form>? 直接用瀏覽器提交，服務器端的$_POST['os']只有選中項的值，但用sendPostRequest()提交，不管是否選中選項，$_POST['os']永遠包含所有選項的值。
針對這個問題，常見的解決方法是不使用POST方式，而用GET方式來提交表單，比如這篇文章：
http://www.captain.at/howto-ajax-form-post-get.php
既然AJAX總是提交所有選項的值，那就把選項的值默認設為空，當選中的時候再賦值，就能保證服務器端只接收到選中項的值了。
方法是用一個函數來設置選項的值，把選項的值先保存在alt屬性中：
<form?id="Reg-form"?name="Reg-form"?onsubmit="sendPostRequest();?return?false;"??????action="submit.php"?method=post?encType=multipart/form-data>?????<input?type="checkbox"?name="os[]"?alt="1"?value=""?autocomplete="off"?onclick="checkboxValue(this);">Linux<br>?????<input?type="checkbox"?name="os[]"?alt="2"?value=""?autocomplete="off"?onclick="checkboxValue(this);">Mac?OS<br>?????<input?type="checkbox"?name="os[]"?alt="3"?value=""?autocomplete="off"?onclick="checkboxValue(this);">Windows<br>?????<input?id="submit"?type="submit"?value="Submit"?name="submit">?????</form>?????<script?language="JavaScript">?????function?checkboxValue(obj)?????{??????if(obj.checked)??????{???????objobj.value?=?obj.alt;??????}??????else??????{???????obj.value?=?"";??????}?????}?????</script>? ?
轉載于:https://blog.51cto.com/viperii/309459
總結
以上是生活随笔為你收集整理的解决AJAX表单用POST方式提交Checkbox复选框的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
