发送HTML表单多＆LT;选择＆GT;通过POST请求与AJAX框？ [英] Sending HTML Form Multiple <select> box via POST request with AJAX?

问题描述

我有多个选择框HTML表单。我无法弄清楚如何通过一个POST请求的值发送到我的PHP应用程序使用AJAX。它工作得很好，如果我使用GET请求，并使用一个单一的选择框而不是当我用一个多选择框。我们的想法是让用户持有控制（或MAC命令），然后选择一个或多个类别。根据其类别的选择将决定其它形式的选项将使用AJAX来显示。该选择框看起来是这样的：

编辑：解决

 ＆LT;选择多个名称=类别[]的onclick =sendCategories（本）＆GT;
＆LT;期权价值=0＆GT; 1类和LT; /选项＆GT;
＆LT;期权价值=1＆GT;第2类和LT; /选项＆GT;
＆LT;期权价值=2＆GT;分类第3版; /选项＆GT;
＆LT; /选择＆GT;
 

我的JavaScript函数如下所示：

 函数sendCategories（SEL）{
    如果（window.XMLHtt prequest）
    {
        XMLHTTP =新XMLHtt prequest（）;
    }
    其他
    {
        XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
    }
    xmlhttp.onreadystatechange =功能（）
    {
        如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）
        {
            的document.getElementById（my_div）的innerHTML = xmlhttp.responseText。
        }
    }
    xmlhttp.open（POST，http://www.mysite.com/update_categories.php，真正的）;
    xmlhttp.setRequestHeader（内容类型，应用程序/ x-WWW的形式urlen codeD'）;
    VAR值= $（SEL）.serialize（）;
    xmlhttp.send（值）;
}
 

解决方案

您将不得不产生在POST发送你自己的查询字符串。这里的HTML标记使用方法：

 ＆LT;选择多个名称=类别[]的onchange =sendCategories（本）;＆GT;
 

以及JavaScript函数：

 函数sendCategories（SEL）{
    VAR XMLHTTP;
    如果（window.XMLHtt prequest）{
        XMLHTTP =新XMLHtt prequest（）;
    } 其他 {
        XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
    }
    xmlhttp.onreadystatechange =功能（）{
        如果（xmlhttp.readyState === 4和＆安培; xmlhttp.status === 200）{
            的document.getElementById（my_div）的innerHTML = xmlhttp.responseText。
        }
    };
    xmlhttp.open（POST，http://www.mysite.com/update_categories.php，真正的）;
    xmlhttp.setRequestHeader（内容类型，应用程序/ x-WWW的形式urlen codeD）;

    VAR值= []，I，J，CUR;
    对于（i = 0，J = sel.options.length; I＆LT; D​​];我++）{
        CUR = sel.options [I]
        如果（cur.selected）{
            values​​.push（EN codeURIComponent（cur.value））;
        }
    }
    如果（values​​.length）{
        值= EN codeURIComponent（sel.name）+=+ values​​.join（＆放大器;+ EN codeURIComponent（sel.name）+=）;
    } 其他 {
        值=无效;
    }

    xmlhttp.send（值）;
}
 

请注意，我从更改的事件的onclick 到的onchange ，但是这真的取决于你是否想要这个功能运行元素被点击时，或者它的值是真正的改变......它可以减少一些不必要的电话。

这应该产生通常用于为＆LT发送值的查询字符串;选择＆GT; 与选定的多个选项

下面是一个的jsfiddle演示如何查询字符串正在这里产生： http://jsfiddle.net/kKWQM/

I have an html form with a multiple select box. I can't figure out how to send the values to my php application with AJAX via a post request. It works just fine if I use a GET request and use a single select box but not when I use a multiple select box. The idea is for users to hold control (or command with mac) and select one or more categories. Depending on which categories are selected will determine what other form options will be displayed using AJAX. The select box looks like this:

Edit: SOLVED

<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>

My javascript function looks like this:

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);
}

解决方案

You'll have to generate the query string to send in the POST on your own. Here's the HTML tag to use:

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

And the Javascript function:

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);
}

Note that I changed the event from onclick to onchange, but that's really up to you whether you want this function to run when the element is clicked, or its value is truly changed...it can reduce some unnecessary calls.

This should generate a querystring that is normally used for sending values for a <select> with multiple options selected.

Here's a jsFiddle that demonstrates how the querystring is being generated here: http://jsfiddle.net/kKWQM/

这篇关于发送HTML表单多＆LT;选择＆GT;通过POST请求与AJAX框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！