使用 AJAX 通过 POST 请求发送 HTML 表单多个 <select> 框？

Question

我有一个带有多选框的 html 表单。我不知道如何通过 post 请求使用 AJAX 将值发送到我的 php 应用程序。如果我使用 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>选择了多个选项的a 发送值。

这是一个 jsFiddle，它演示了如何在此处生成查询字符串：http : //jsfiddle.net/kKWQM/