如何以 param=value1%2Cvalue2 格式将复选框的多个值发送到后端？答案

【问题标题】：How to send multiple values of checkbox to back-end in param=value1%2Cvalue2 format?如何以 param=value1%2Cvalue2 格式将复选框的多个值发送到后端？
【发布时间】：2014-05-30 16:17:26
【问题描述】：

我的表单中有一个复选框列表，如下所示，我不知道在后端接收其选定选项的最佳方式是什么。

<s:form id="search" name="search" method="GET" action="search">
    <s:checkboxlist name="mySearch.age" label="Age" list="@com.example.Lists@AGE"/>
    <s:checkboxlist name="mySearch.gender" label="Gender" list="@com.example.Lists@GENDER"/>
    <s:select name="mySearch.education"  label="Education" list="@com.example.Lists@EDUCATION"/>
    <s:select name="mySearch.country" label="Country" list="@com.example.Lists@COUNTRY"/>
    <s:textfield id="mySearch.terms" name="mySearch.terms" label="Terms (Separate by comma)"/>
  <s:submit value="Submit"/>
</s:form>

我不确定年龄应该是什么类型以及如何在后端捕获它。

我需要它们如下所示或任何其他格式以便于基于它们进行搜索

   age=20%2C30 or age=20,30

1)此刻就像跟随

  private List<Integer> age;

并且值将在 url 中如下所示，

   mySearch.age=20&mySearch.age=30

2) 我使用 javascript 函数和简单的 html（与 this 相同）使用以下代码发送值，但它以 age=20&age=30 的形式发送它们

     $('#search').serialize()

3) 我还使用以下代码将它们作为 age=2,3 发送，这很好，但我想知道如何将表单的其他字段的值与这些值一起发送？

var formValues = $('#search').serialize();
    var obj={};
    obj.ages = $('input[name=age]:checked').map(function(){
        return this.value;
    }).get();
    alert(obj.ages);

【问题讨论】：

模型驱动并不复杂，而是很容易将代码分成模块
您还想发送哪些其他字段？
@Rembo 问题更新
为什么不使用模型类进行数据接收？
@JackMoore：标准做法是将参数发送为mySearch.age=20&mySearch.age=30。

标签： java javascript jquery jsp struts2

【解决方案1】：

你的代码就差不多了。

$.serialize() 只返回一个字符串，因此您可以像处理任何其他字符串一样操作它。

var formValues = $('#search input, #search select, #search textarea').not("[name='age']").serialize();
var ages = $('input[name=age]:checked').map(function () {
    return this.value;
}).get();
formValues += "&age=" + ages;
alert(formValues);

第一行序列化所有字段，除了年龄。然后我们只需将年龄添加到字符串中，并将最终的字符串发送到服务器。

如果您有其他具有多个值的字段，只需扩展 .not("[name='age'], [name='otherfield']") 以包含这些其他字段，然后重复上述过程。

编辑：这是一个 JSFiddle：http://jsfiddle.net/bUQ4b/

【讨论】：

【解决方案2】：

选中多个复选框时，您可以将它们分配给场景中的字符串和整数数组。例如，如果您的年龄列表有选项：10、20、30 和 40，其中选择了 10,20，您可以将它们以逗号分隔的 10,20 的形式存储在整数数组中，并由它们的 getter 检索。例如，

    <s:form id="search" name="search" method="GET" action="search">
        <s:checkboxlist name="age" label="Age" list="ageList"/>
        <s:checkboxlist name="gender" label="Gender" list="genderList"/>
        <s:select name="education"  label="Education" list="educationList"/>
        <s:select name="country" label="Country" list="countryList"/>
      <s:submit value="Submit"/>
    </s:form>

在您捕获这些值的搜索表单中，将它们指定为数组：

public Integer[] age;
public String[] gender;
public String[] education;
public String[] country;
//Mutators for these

另外，请确保填充了性别列表、教育列表、国家列表。

【讨论】：

【解决方案3】：

如何将表单的其他字段的值与这些一起发送价值观？

您可以使用 JSON 数据格式发送所有字段值，要发送 JSON，请添加此 jquery 辅助函数以从表单元素创建 JSON 对象：

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

然后在表单提交上创建 JSON 对象，如：

$(function() {
    $('form#search').submit(function() {
        var sendData = {};
        sendData["searchModel"] = $(':input:visible', this).serializeObject();
        $('#input').text(JSON.stringify(sendData));
        $.ajax({
            url : "writeJSON",
            type : 'POST',
            data : JSON.stringify(sendData),
            dataType: 'json',
            contentType:"application/json;charset=utf-8",                       
            success : function(res) {
                console.log('success');
                $('#output').text(JSON.stringify(res));             
            },error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error: '+textStatus+' : '+ errorThrown);
            }
            });
        return false;
    });
});

这里，$(':input:visible', this).serializeObject(); 将只返回可见元素值，即所有复选框选中值、选择框选中选项和文本输入值等。还要注意这里的 AJAX 方法是 POST。

使用 struts2-json-plugin 创建一个模型 bean 以序列化和反序列化 JSON，例如：

public class SearchModel {

    private Integer[] ages;
    private String gender;
    private String education;
    private String country;
    private String terms;

    //getters, setters and constructor
}

动作类将如下所示：

public class SearchAction extends ActionSupport {

    private static final long serialVersionUID = 1L;
    private SearchModel searchModel;

    public String readJSON() {
            //do your work here..
        return SUCCESS;
    }

    public String writeJSON() {     
        System.out.println("writeJSON Method invoked");
        System.out.println(searchModel);
        return SUCCESS;
    }

    // SearchModel getter and setter

}

在struts.xml中配置返回和接收json结果如：

<package name="default" namespace="/" extends="json-default">     

       <interceptors>
        <interceptor-stack name="defaultStack">
            <interceptor-ref name="json">
                <param name="enableSMD">true</param>
            </interceptor-ref>
        </interceptor-stack>
       </interceptors>
       <default-interceptor-ref name="defaultStack" />

       <action name="writeJSON" class="com.actions.SearchAction" method="writeJSON">          
          <result type="json"/>
       </action>
       <action name="readJSON" class="com.actions.SearchAction" method="readJSON">          
          <result type="json"/>
       </action>

</package>

并以jsp形式：

<s:form id="search">
    <s:checkboxlist name="ages"
                    label="Age" list="ages"/>
    <s:checkboxlist name="gender"
                    label="Gender" list="genders"/>
    <s:select name="education"
                label="Education" list="educations"/>
    <s:select name="country" 
                label="Country" list="countrys"/>
    <s:textfield id="terms"
                name="terms" label="Terms (Separate by comma)"/>
  <s:submit value="Submit"/>
</s:form>
Input:
 <div id="input"></div>
Output:
 <div id="output"></div>

【讨论】：

我想这种方法是违反一般做法的。

【解决方案4】：

$(document).on("click", "a.downloadAllFile", function() {
    var db = $('.childcheckbox:checked').map(function(i,n) {
        return $(n).val();
    }).get(); //get converts it to an array

    if(db.length == 0) { 
        db = "none"; 
    }
    console.log(db);
    $.post(url, {'db[]': db}, function(response) {
        $("#dbdisplay").html(response); 
    });
    return true;
});

【讨论】：

表单上有很多其他字段，这不是一个好习惯。

【解决方案5】：

如果是为了更容易在服务器端构建列表，您可以这样做：

String[] ages = request.getParameterValues("age");
if(ages!=null)
{
    List<Integer> listAgesInt = new LinkedList<Integer>();
    try
    {
        for(String s : ages )
        {
           listAgesInt.add(Integer.valueOf(s));
        }
    }
    catch(Exception ex)
    {
        out.print("Error converting to integer");
    }
    for(int i : listAgesInt )
    {
       out.print("<br/>" + i);
    }
}

那么您无需更改浏览器发送数据的方式。你可以很容易地把它变成一个接收String[]并返回List<Integer>的函数。然后你就打电话给List<Integer> listAgesInt = somelib.funcname(request.getParameterValues("age"));

【讨论】：

我关心的是服务器端和地址栏上请求的简单性。

【解决方案6】：

虽然（正如 Aleksandr 评论的那样）这不是标准做法，但我认为您可以通过以下方式实现目标：

在表单中添加一个新的 hidden 字段，比如 mySearch.ages
onSubmit 遍历检查的 mySearch.age 字段，连接结果并将它们作为值添加到 mySearch.ages
禁用所有 mySearch.age 输入
然后像往常一样序列化/提交

让我知道这是否按预期工作，或者您需要更多帮助。

【讨论】：