Django + Ajax: почему происходит перенаправление на новый URL и отображение ответа в браузере?

Исходя из моего понимания, ajax можно использовать для предотвращения перезагрузки/обновления/перенаправления страницы после отправки запроса на сервер. Однако мой код перенаправляет страницу для отображения JSON-ответа. Я использовал e.preventDefault(), но это не сработало. Есть ли что-то, что я делаю неправильно?

Мой код Django выглядит следующим образом: views.py:

def projects(request):
    if request.method == 'POST':
        task_id = request.POST.get('task_id')
        myUser = User.objects.get(pk=request.user.id)
        myTask = Task.objects.get(pk = task_id)
        myTask.claimed.add(myUser) #add the user to the task
        return JsonResponse({'status': 'ok'})

    projects = Project.objects.all()
    tasks = Task.objects.all()
    open_tasks = tasks.filter(status='Created')
    proj_dict = {}
    context = {
        'projects' : projects,
        'tasks' : tasks,
        'open_tasks' : open_tasks,
    }
    return render(request, 'projects/projects.html', context)

Мой HTML:

<form action="{% url 'projects:' %}" method="POST" class='join-form' id='{{task.id}}'>
    {% csrf_token %}
    <input type="hidden" name="task_id" value={{task.id}}>
    <button type="submit" class=" claim-font claim-button">
        Join
    </button>
</form>

Вызов ajax:

<script>
    $(document).ready(function () {
        $('#join-form').on('submit', function (e) {
            e.preventDefault();
            e.stopPropagation();
            const url = $(this).attr('action');
            console.log("here we are");
            const task_id = $(this).attr('id');
            $.ajax({
                type: 'POST',
                dataType: "json",
                headers: { 'X-CSRFToken': csrftoken },
                url: url,
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    task_id: task_id,
                },
                success: function (response) {
                    alert(data);
                    console.log("here we are");
                },
                error: function (response) {
                    console.log('error', response);
                    alert("shit")
                }
            })
            return false;
        });
    });
</script>

Казалось бы, ajax сделает так, что мой браузер не будет перенаправлять/перезагружать/обновлять после нажатия кнопки submit, а изменения будут происходить только на стороне сервера. Однако мой браузер отображает: {"status": "ok"}

Любые идеи будут высоко оценены!

<script>
    $(document).ready(function () {
        $('.join-form').submit(function(e) {
            e.preventDefault();
          // write your code here
         });
        
    });
</script>