在django中提交而不刷新

Question

我有一个 html 表单和提交按钮（它在 manytomanyfield "users" 中添加或删除关系）：

{% if user in event.users.all %}
     <form action="/event/{{ event.id }}/" method="GET">
            <input type="hidden" value="{{ event.id }}" name="remove">
            <input type="submit" value="Remove">
      </form>
{% else %}
     <form action="/event/{{ event.id }}/" method="GET">
            <input type="hidden" value="{{ event.id }}" name="add">
            <input type="submit" value="Add">
      </form>

在views.py中：

def show_event(request, event_id):
    ...
    event = get_object_or_404(Event, id=event_id)
    user = request.user
    if request.GET.get('add'):
        event.users.add(user)
        event.save()
    if request.GET.get('remove'):
        event.users.remove(user)
        event.save()
    return render(request, 'events/event.html', {'event':event, 'user':user,})

这个功能可以正常使用，但是提交表单后页面会刷新。我不需要刷新，我需要更改按钮文本，就像 Twitter 中的 "Follow" 按钮一样。我尝试使用一些 jquery\ajax 但我不完全理解它应该如何工作。可以请任何人解释如何去做吗？谢谢

Answer 1

这是一个非常基本的 ajax 示例。在您的表单中，您可以通过以下方式触发 ajax 方法：

<a onclick="AjaxFormSubmit()" href="#">Submit</a>

那么你的ajax方法如下：

function AjaxFormSubmit() {
    $.ajax({
        url : '/event/{{ event.id }}/',
        type : "POST",
        data : { the_post : $('#id-of-your-field').val() }
    }).done(function(returned_data){

        // This is the ajax.done() method, where you can fire events after the ajax method is complete 

        // For instance, you could hide/display your add/remove button here

    });
}

我建议查看 Ajax documentation 以了解所有可用的 Ajax 方法。

此外，在您看来，您需要通过 HttpResponse return（在此示例中）json 数据。即

return HttpResponse(json.dumps(your_data))
# I like to return success/fail Booleans, personally

*注意，这是未经测试的代码。

在django中提交而不刷新

Submit without refresh in django

python

django

ajax

submit