提交时不刷新-Django

塞内戈

我在网站上有一个“关注”按钮，就像在Twitter中一样。但是此按钮是仅html格式，没有任何js。我对js / jquery / ajax一无所知。谁能帮助我，我该怎么做才能提交此表格而无需刷新页面？谢谢你。

模板'event.html'：

{% if user in event.users.all %}
        <form action="/event/{{ event.id }}/" method="GET">
        {% csrf_token %}
        <input type="hidden" value="{{ event.id }}" name="remove">
        <input type="submit" class="btn btn-warning btn-block" value="{% trans "Remove from My Events"%}">
        </form>
{% else %}
        <form action="/event/{{ event.id }}/" method="GET">
        {% csrf_token %}
        <input type="hidden" value="{{ event.id }}" name="add">
        <input type="submit" class="btn btn-primary btn-block" value="{% trans "Add to My Events"%}">
        </form>
{% endif %}

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}

第505节

首先学习Javascript以及Jquery和Ajax以便更清楚地了解。http://www.tutorialspoint.com/jquery/
http://www.w3schools.com/jquery/

模板'event.html'：

{% if user in event.users.all %}
    <form action="/event/{{ event.id }}/" method="GET" id="event">
    {% csrf_token %}
    <input type="hidden" value="{{ event.id }}" name="remove">
    <input type="submit" class="btn btn-warning btn-block" value="{% trans "Remove from My Events"%}">
    </form>
{% else %}
    <form action="/event/{{ event.id }}/" method="GET">
    {% csrf_token %}
    <input type="hidden" value="{{ event.id }}" name="add">
    <input type="submit" class="btn btn-primary btn-block" value="{% trans "Add to My Events"%}">
    </form>
{% endif %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$('#event').submit(function(e){
    e.preventDefault();
    url = $(this).attr('action') # to get url
    data = $(this).serialize(); # for sending form data 
    $.post(url, data, function(response){
          # do whatever you want with response(data)
    })
})
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。