如何为Django视图添加Ajax实现无刷新切换布尔字段状态

我在Django项目中尝试通过POST请求将Workout模型的active布尔字段从False切换为True。原本按钮功能正常，但希望点击时页面不刷新，因此尝试使用Ajax，却一直收到状态为error的400错误请求，不知原因。

最初的尝试 #

视图代码 #

def change_status(request, id):
    if request.is_ajax() and request.method == 'POST':
        startsession = Workout.objects.get(id=id)
        startsession.active = True if request.POST.get('active') == 'true' else False
        startsession.save()
        data = {'status': 'success', 'active': startsession.active}
        return JsonResponse(data, status=200)
    else:
        data = {'status': 'error'}
        return JsonResponse(data, status=400)

模板代码 #

<div>
  {% if object.active %}
    <button disabled  type="button">Start the workout</button>
  {% else %}
      <a href="{% url 'my_gym:bla' object.id %}">
      <button id="customSwitches" onclick="start();" type="button">Start the workout</button>
      </a>
  {% endif %}
</div>

Ajax脚本代码 #

<script>
            $(document).ready(function()
            $("#customSwitches").on('click', function () {
              $.ajax({
                url: "{% url 'my_gym:bla' object.id %}",
                data: {
                  csrfmiddlewaretoken: "{{ csrf_token }}",
                  active: this.disabled
                },
                type: "POST",
                dataType: 'json',

              });
              .done(function(data) {
                  console.log(data);
              })
              .always(function() {
                  console.log('[Done]');
              })
            })
            });
</script>

可正常工作但会刷新页面的视图代码 #

def change_status(request, id):
    url = request.META.get('HTTP_REFERER')  # 获取上一页URL
    startsession = Workout.objects.get(id=id)
    startsession.active = True
    startsession.save()
    return HttpResponseRedirect(url)

更新后的尝试（无响应） #

视图代码 #

def change_status(request,id):
    # startsession = get_object_or_404(ActiveSession, id=id)
    startsession = Workout.objects.get(id=id)
    startsession.active = True
    startsession.save()
    context = {
        'startsession': startsession,
    }
    if request.is_ajax:
        html = render_to_string('my_gym/start_workout.html', context, request=request)
        return JsonResponse({'form': html})

模板及脚本代码 #

{{ object.active }}
    <div id="startworkout">
      <form action="{% url 'my_gym:bla' object.id %}" method='post'>
          {% csrf_token %}
              {% if object.active %}
              <button disabled  type="button" class="mt-3 btn btn-dark btn-block mb-4 ripple-surface">Start the workout</button>
              {% else %}
                <button id="customSwitches" onclick="start();" type="button" class="mt-3 btn btn-dark btn-block mb-4 ripple-surface">Start the workout</button>
              {% endif  %}
      </form>
    </div>

    <script type="text/javascript">
        $(document).ready(function(event){     <-------- 错误位置
            $(document).on('click','#customSwitches', function(event){
                event.preventDefault();
                var id= $(this).attr('value');
                $.ajax({
                    type:'POST',
                    url:'{% url 'my_gym:bla' object.id %}',
                    data:{'id': id, 'csrfmiddlewaretoken':'{{csrf_token}}'},
                    dataType:'json',
                    success:function(response){
                        $('#startworkout').html(response['form'])
                        console.log($('#startworkout').html(response['form']));
                    },
                    error:function(rs, e){
                        console.log(rs.responseText);
                    },
                });
            });
        });
    </script>

控制台报错 #

Uncaught ReferenceError: $ is not defined at (index):145:9

该错误与$(document).ready(function(event){代码行相关。

需求 #

寻求解决方案：如何为Django视图添加Ajax，实现点击按钮时页面不刷新。

内容的提问来源于stack exchange，提问作者A_K