通過POST請求通過AJAX發送HTML表單多個<select>框？

Question

我有一個多選框的HTML表單。我無法弄清楚如何通過POST請求將值發送到我的PHP應用程序與AJAX。如果我使用GET請求並使用單個選擇框，但在使用多個選擇框時不起作用，那麼它工作得很好。這個想法是讓用戶保持控制（或者用mac命令）並選擇一個或多個類別。取決於選擇的類別將決定使用AJAX顯示哪些其他表單選項。該選擇框看起來是這樣的：

編輯：解決

<select multiple name="categories[]" onclick="sendCategories(this)"> 
<option value="0">Category 1</option> 
<option value="1">Category 2</option> 
<option value="2">Category 3</option> 
</select> 

我的JavaScript函數如下所示：

function sendCategories(sel){ 
    if (window.XMLHttpRequest) 
    { 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("my_div").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("POST","http://www.mysite.com/update_categories.php",true); 
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    var values = $(sel).serialize(); 
    xmlhttp.send(values); 
} 

Answer 1

你必須生成查詢字符串中的POST發送你自己的。這裏的HTML標籤的使用方法：

<select multiple name="categories[]" onchange="sendCategories(this);"> 

以及JavaScript函數：

function sendCategories(sel){ 
    var xmlhttp; 
    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
      document.getElementById("my_div").innerHTML = xmlhttp.responseText; 
     } 
    }; 
    xmlhttp.open("POST","http://www.mysite.com/update_categories.php",true); 
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 

    var values = [], i, j, cur; 
    for (i = 0, j = sel.options.length; i < j; i++) { 
     cur = sel.options[i]; 
     if (cur.selected) { 
      values.push(encodeURIComponent(cur.value)); 
     } 
    } 
    if (values.length) { 
     values = encodeURIComponent(sel.name) + "=" + values.join("&" + encodeURIComponent(sel.name) + "="); 
    } else { 
     values = null; 
    } 

    xmlhttp.send(values); 
} 

注意，我改變了事件從onclick到onchange，但是這真的取決於你是否要這個功能運行當元素被點擊時，或者它的值被真正改變時...它可以減少一些不必要的調用。

這應該會生成一個查詢字符串，通常用於發送具有選定多個選項的<select>的值。

以下是一個演示如何正在這裏生成的查詢字符串一個的jsfiddle：http://jsfiddle.net/kKWQM/