使用jQuery / Ajax将多个选定的复选框发送到Java

时间:2018-07-07 07:14:50

标签: java jquery html ajax

我正在尝试使用jQuery / Ajax从html发送多个选定的复选框到Java。当我在Java中显示结果时,我得到的是“ activityRangeCBs []”,而不是我选择的值(即“国家”,“州”)。

HTML是:

<div class="controls col-lg-10 col-md-10 col-sm-9 col-xs-8">
   <label class="checkbox-inline" for="activityRange1"><input type="checkbox" value="National" id="activityRangeCBs" name="activityRangeCBs[]">National</label>
   <label class="checkbox-inline" for="activityRange2"><input type="checkbox" value="State" id="activityRangeCBs" name="activityRangeCBs[]">State</label>
   <label class="checkbox-inline" for="activityRange3"><input type="checkbox" value="Region" id="activityRangeCBs" name="activityRangeCBs[]">Region</label>
   <label class="checkbox-inline" for="activityRange4"><input type="checkbox" value="District" id="activityRangeCBs" name="activityRangeCBs[]">District</label>
   <label class="checkbox-inline" for="activityRange5"><input type="checkbox" value="Group" id="activityRangeCBs" name="activityRangeCBs[]">Group</label>
   <label class="checkbox-inline" for="activityRange6"><input type="checkbox" value="Section" id="activityRangeCBs" name="activityRangeCBs[]">Section</label>
</div>

jQuery / Ajax是:

        var activityRangelist = '';
        for (i = 0; i < activityRangeCBs.length; i++) {
            if (activityRangeCBs[i].checked === true) {
                if (activityRangelist.length > 0) {
                    activityRangelist += ',';
                }
                activityRangelist += activityRangeCBs[i].name;
            }
        }

        var dataToBeSent  = {
                activityRangeCBs: activityRangelist,
        }; // you can change parameter name

        $.ajax({
            url : 'E1ActivityCreateView', // Your Servlet mapping or JSP(not suggested)
            data : dataToBeSent, 
            type : 'POST',
        })

Java是:

String activityRangeCBs = request.getParameter("activityRangeCBs"); // From Local Storage
Sring System.out.println("activityRangeCBs: " + activityRangeCBs);

1 个答案:

答案 0 :(得分:1)

检查此工作代码

只需更改此行代码 activityRangelist + = activityRangeCBs [i] .name; activityRangelist + = $(activityRangeCBs [i] .parentNode).text();

    $(document).ready(function () {
        $('#submit').click(function () {
            var activityRangelist = '';
            for (i = 0; i < activityRangeCBs.length; i++) {
                if (activityRangeCBs[i].checked === true) {
                    if (activityRangelist.length > 0) {
                        activityRangelist += ',';
                    }
                    activityRangelist += $(activityRangeCBs[i].parentNode).text();
                }
            }

            var dataToBeSent = {
                activityRangeCBs: activityRangelist,
            }; // you can change parameter name
            console.log(dataToBeSent);
            $.ajax({
                url: 'E1ActivityCreateView', // Your Servlet mapping or JSP(not suggested)
                data: dataToBeSent,
                type: 'POST',
            })
        });
    });
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="container">
        <div class="controls col-lg-10 col-md-10 col-sm-9 col-xs-8">
            <label class="checkbox-inline" for="activityRange1"><input type="checkbox" value="National" id="activityRangeCBs" name="activityRangeCBs[]">National</label>
            <label class="checkbox-inline" for="activityRange2"><input type="checkbox" value="State" id="activityRangeCBs" name="activityRangeCBs[]">State</label>
            <label class="checkbox-inline" for="activityRange3"><input type="checkbox" value="Region" id="activityRangeCBs" name="activityRangeCBs[]">Region</label>
            <label class="checkbox-inline" for="activityRange4"><input type="checkbox" value="District" id="activityRangeCBs" name="activityRangeCBs[]">District</label>
            <label class="checkbox-inline" for="activityRange5"><input type="checkbox" value="Group" id="activityRangeCBs" name="activityRangeCBs[]">Group</label>
            <label class="checkbox-inline" for="activityRange6"><input type="checkbox" value="Section" id="activityRangeCBs" name="activityRangeCBs[]">Section</label>
            <button id="submit">Submit</button>
        </div>
    </div>