Как получить доступ и передать значения флажка в 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;
};