Как создать функцию для передачи ajax-данных при нажатии на кнопку

Я хочу, чтобы данные ajax передавались в функцию add_teacher в views.py при нажатии на кнопку "Добавить учителя". path('student/add_teacher/', views.add_teacher, name='add_teacher'),

Если выполняется только приведенный ниже код, значение выводится на консоль.

  $(function () {
    $checkbox = $('.Checked');
    $checkbox.click(checkArray);

    function checkArray(){
        var chkArray = [];
        chkArray = $.map($checkbox, function(el){
            if(el.checked) { return el.id };
        });
        console.log(chkArray);
    }
 );

Но когда я добавляю условие нажатия на кнопку, функция не работает.

$(function () {
    $('button.addteacher').on('click',function () {
        $checkbox = $('.Checked');
        $checkbox.click(checkArray);

        function checkArray(){
            var chkArray = [];
            chkArray = $.map($checkbox, function(el){
                if(el.checked) { return el.id };
            });
            console.log(chkArray);

            $.ajax({
              url: "/student/add_teacher/",
              type: "post",
              data: {'chkArray' : chkArray},
              headers: { "X-CSRFToken": "{{ csrf_token }}" },
            });
        }
    });
});

html-файл выглядит следующим образом:

       <table id="student-list" class="maintable">
        <thead>
           <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Select</th>
          </tr>
        </thead>

        <tbody>
          {% for student in students %}
          <tr class="student">
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
            <td>{{ student.sex }}</td>
            <td><input type="checkbox" class="Checked" id="{{ student.id }}"></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <button type="button" class="btn btn-secondary addteacher">Add Teacher</button>

Вот как вы можете использовать AJAX для получения некоторого результата в Django :

$.ajax({
    // I recommand you to use django like url (let ajax_url = "{% url_name %} instad of plain text url" 
    url: '/student/add_teacher/',
    data: {
      'chkArray' : chkArray,
    },
    dataType: "json",
    type: 'POST',
    // If it is a success
    success: function (response) {
        // Do what you whant with the result
        console.log(response.message)  // Print the server response 
    },
    error: function(response) {
        // Do something in case of error
        console.log(response.message)
    }
  });

Но ваше представление также должно быть готово к обработке ajax запроса :

from django.http import JsonResponse

def my_ajax_view(request):
    if request.method == 'POST':
        # Do something here with received datas
        if request.POST['chkArray']
            response_data = {'message': 'data is posted', 'status': 200}
        else:
            response_data = {'message': 'invalid data', 'status': 422}
        return JsonResponse(response_data)
Вернуться на верх