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中的“关注”按钮一样更改按钮文本。我试图使用一些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返回（在此示例中）json数据。即。

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

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

在django中提交而不刷新

1 个答案: