通过带有 AJAX 的 POST 请求发送 HTML 表单多个 <select> 框？答案

【问题标题】：Sending HTML Form Multiple <select> box via POST request with AJAX?通过带有 AJAX 的 POST 请求发送 HTML 表单多个 <select> 框？
【发布时间】：2013-01-23 20:05:33
【问题描述】：

我有一个带有多选框的 html 表单。我不知道如何通过发布请求使用 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);
}

【问题讨论】：

标签： javascript html ajax arrays forms

【解决方案1】：

你可以这样做，

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

并使用 JQuery 制作 AJAX，

function sendCategories(sel){
    var values = $(select).serialize();
    console.log (values);       // See if you get the serialized data in console.

    $.ajax({
        type: 'POST',
        url: "http://www.mysite.com/update_categories.php"
        data: values,
        success: function (data) {
            document.getElementById("my_div").innerHTML = data;
        }
    });
}

仅供参考，Netscape 事件绑定模型已弃用，您可以使用跨浏览器事件绑定，例如 this

【讨论】：

感谢您的回复。我试过了，但没有用。发送值后，我必须在服务器端执行另一个步骤吗？例如，我是否必须先反序列化这些值才能起作用？
我都试过 print_r($_POST['values']);还有 print_r(unserialize($_POST['values']));但我什么也没得到。
@kyzer1978 看看你是否得到了console.log(values) 中的值，如果是，那么你应该看看你是如何将这些值发送到服务器的。尝试编辑后的代码..
Jquery 成功了！不过，我确实必须先设置 RequestHeader。我添加了 xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');到我的原始代码并使用 serialize() 函数和繁荣！问题解决了！

【解决方案2】：

jQuery 应该会让你更轻松。在包装好的选择上调用 .val() 会返回一个包含所选值的数组。您只需将这些发布到服务器：

HTML：

<html>
    <body>
        <form>
            <select name="mySelect" multiple="on">
                <option value="1">Uno</option>
                <option value="2">Dos</option>
                <option value="3">Tres</option>
            </select>
        </form>
        <input id="submitButton" type="button" value="Click To Submit"/>
    </body>
</html>

JavaScript：

$(function() {
    $('#submitButton').click(function() {
        var valuesArray = $('select[name=mySelect]').val()
        $.ajax({
            type: 'POST',
            url: '/path/to/php', // your php url would go here
            data: { mySelect: valuesArray }
        }).done(function(msg) {
            // parse response from msg
        });
    });
});

【讨论】：

downvoter 请评论这里有什么问题。我看不出有什么问题。
谢谢，但我实际上是在将整个表单提交到服务器之前尝试生成动态 html 代码，所以这并不能解决问题。在通过 AJAX 将表单发送到服务器之前，每当用户单击选择框中的不同类别时，我基本上想在表单中显示不同的选项。

【解决方案3】：

您必须自己生成要在 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/

【讨论】：

嗯....肯定越来越暖和了。似乎这会起作用，但由于某种原因，当我尝试使用我的 php 应用程序在服务器端检索发布请求时，我仍然没有得到任何东西。我正在尝试检查这样的值： print_r($_POST['values'])
@kyzer1978 太棒了，很高兴你越来越近了！所以，我不确定你为什么使用$_POST['values'] - 如果你查看jsFiddle 中的alert，你会注意到查询字符串类似于：categories[]=asdf&categories[]=fdsa&categories[]=aaa。所以访问$_POST时应该使用的“key”是“categories[]”。这意味着，您应该尝试$_POST['categories[]']。那有意义吗？试试看，让我知道会发生什么。如果这不起作用，请尝试$_POST['categories']。 values 只是 Javascript 变量的名称，与发送到服务器的内容无关
@kyzer1978 它“与发送到服务器的内容无关”的原因是因为我正在模拟正常提交多个 <select> 时所做的事情（没有 AJAX）。提交表单时，每个输入的值都以key=value 提交，其中key 是元素的name 属性，value 是元素的当前值。对于多个<select>，需要有一种方法来区分所有选择的值。因此，虽然通常情况下，对于非多个 <select>，它将是 categories[]=val1，但它会为每个选定的值复制它。
感谢您的快速回复。现在使用 $_POST['categories'] 完全有意义。不幸的是，不管有没有额外的括号，它似乎还没有工作。我确实在您发送的 jsFiddle 中注意到，当我更改选择框中的值时，我仍然得到相同的查询字符串。
@kyzer1978 啊，我看到.serialize 的做法有所不同。它似乎没有编码= 和&。所以我更新了我的答案，只对key 和value 进行编码，仅此而已。我又犯了一个愚蠢的错误。希望那会解决它。我可以发誓在你要传递的最后一个查询字符串上调用 encodeURIComponent 是可以的。

【解决方案4】：

您可以使用 JS 字符串和数组函数来实现该解决方案。实际上，您需要发送到 Apache 的字符串应该包含如下模式：

xxx[]=a&xxx[]=b&xxx[]=c

其中 SELECT 元素的名称在您的表单中为 xxx[]，a、b 和 c 是用户选择的三个值。

所以是的，您重复键名的次数与用户在 SELECT 中选择不同选项的次数一样多。

在 JS 中，您可以使用一组选定的选项：

selected_options.join("&xxx[]=") to produce that pattern.

【讨论】：