时间戳

首页 > 解决方案 > 如何创建一个函数以在单击按钮时传递 ajax 数据

javascript - 如何创建一个函数以在单击按钮时传递 ajax 数据

问题描述

当单击“添加教师”按钮时，我希望将 ajax 数据传递给 views.py 中的 add_teacher 函数。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>

标签： javascriptdjangoajaxapi

解决方案

这是您如何使用 AJAX 在 Django 中获得一些后端结果的方法：

$.ajax({
    // I recommend you to use django like url (let ajax_url = "{% url_name %} instead 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 want 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 data
        if request.POST['chkArray']
            response_data = {'message': 'data is posted', 'status': 200}
        else:
            response_data = {'message': 'invalid data', 'status': 422}
        return JsonResponse(response_data)

推荐阅读