javascript - 如何在 AJAX 到 Django 表单后停止刷新

Question

我有一个模式，用户可以在其中添加新的Category. 当用户添加一个新的Category并收到来自 AJAX 请求的响应时，我想使用响应数据来更新一些现有的页面数据。问题是我的表单不允许e.preventDefault()，而只是在收到响应后刷新页面：

jQuery AJAX：

function addCategory(e) {
    let post_url = '{% url "policies-categories-form" %}'
    $.ajax({
        url: post_url,
        type:'POST',
        data: $('#addCategoryForm').serialize(),
        success: function(response){
            console.log(response);
            // document.getElementById('editCategoriesContainer').innerHTML = data;
        },
        error:function(){
            console.log('Error');
        },
    });
};

表单（仅在用户单击按钮后使用 JQuery 加载：

{% load crispy_forms_tags %}
<!--Add new category form-->
<div class="form-row mt-4 mb-4">
    <div class="form-group col-md-12 mb-0">
        {{ form.title|as_crispy_field }}
    </div>
</div>
<div class="form-row mt-4 mb-4">
    <div class="form-group col-md-12 mb-0">
        {{ form.parent|as_crispy_field }}
    </div>
</div>
<div class="form-row mt-4 mb-4">
    <div class="form-group col-md-12 mb-0">
        {{ form.groups|as_crispy_field }}
    </div>
</div>
<div class="form-row mt-4 mb-4">
    <div class="form-group col-md-12 mb-0">
        <button class="btn btn-warning btn-block"
                id="addCategoryBtn"
                onclick="addCategory(this)"
                type="submit">
            <span class="fas fa-plus"></span> Add Category
        </button>
    </div>
</div>

看法：

@login_required
def policies_categories_form(request):
    if request.method == 'POST' and request.is_ajax():
        form = PoliciesCategoryForm(request.POST, company=request.tenant)
        if form.is_valid():
            form.save()
            categories = PoliciesAndProceduresCategory.objects.exclude(parent__isnull=False).values()
            return JsonResponse({'success': True, 'categories': list(categories)})
        else:
            return JsonResponse({'success': False, 'error': form.errors})
    else:
        form = PoliciesCategoryForm(company=request.tenant)
        context = {'form': form}
        template = 'policies/policies_categories_form.html'
        return render(request, template, context)

如何阻止它刷新页面？

谢谢！

标签： javascriptjquerydjangoajax