如何访问复选框值并将其传递给ajax

Question

我尝试了以下方式，但请求就像

[21/Sep/2018 14:48:45] "GET /buildknowledge/sharing?bid=75&sharewith=16,17 HTTP/1.1" 500 14382

要求：

  [21/Sep/2018 14:48:45] "GET /buildknowledge/sharing?bid=75&sharewith=16&sharewith=17 HTTP/1.1" 500 14382

我尝试了以下方法：

表格：

 <div class="modal-body">
              <p class="statusMsg"></p>
              <form role="form">{% csrf_token %}                      
                <div class="form-check">
                    <label for="sharewith">Share with</label></br>
                 {% for sharewith in sharewithonly %}
                   <input class="form-check-input position-static" name="mycheckboxes[]" id="myCheckboxes" type="checkbox"  value="{{ sharewith.id }}">
                     <label>{{ sharewith.email }}</label></br>
                  {% endfor%}
                </div>
            </form>
        </div>


        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary submitBtn" onclick="shareForm()">SUBMIT</button>
        </div>
    </div>
</div>

Ajax 和 js 部分：

  function shareForm() {
    console.log(node_name);
    var token = '{{csrf_token}}';

    var sharewith =getChecked();
        function getChecked(){
            var items=document.getElementsByName('mycheckboxes[]');
            var selectedItems=new Array();
            for(var i=0; i<items.length; i++)
            {
                if(items[i].type=='checkbox' && items[i].checked==true)
                    selectedItems.push(items[i].value);
            }
            return(selectedItems);
        };



        $.ajax({
            headers: {"X-CSRFToken": token},
            type: 'GET',
            url: 'sharing',
            dataType: "json",
            traditional: true,
            data: 'sharewith=' + sharewith ,
            beforeSend: function () {
                $('.submitBtn').attr("disabled", "disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success: function (msg) {
                if (msg == 'ok') {
                    $('#inputName').val('');
                                }
        });
    }
}

我只尝试了 POST 请求，只是为了清楚地解释我在这里使用了 GET。 需要如何分配复选框值

Answer 1

忘记手动从表单中提取所有数据。浏览器有内置工具可以帮您完成。

const form = document.querySelector("form");
const formdata = new FormData(form);
$.ajax({
    headers: {"X-CSRFToken": token},
    method: "POST",
    // Pass the form data object to jQuery
    data: formdata,
    // The next two lines stop jQuery trying to convert data and add headers that XHR will do automatically when it is passed a form data object
    processData: false,
    contentType: false,
});

如果你真的、真的、真的想手动操作：

function getChecked(){
    const inputs = document.getElementsByName('mycheckboxes[]');
    const key_values = [];
    for(let i=0; i<inputs.length; i++) {
        let input = inputs[i];
        if (input.type=='checkbox' && input.checked) {
            key_values.push(
                encodeURIComponent(input.name) + 
                "=" +
                encodeURIComponent(input.value)
            );
        }
    }
    const form_encoded_data = key_values.join("&");
    return form_encoded_data;
};