Submit ohne Aktualisierung - Django

Question

Ich habe eine "folgen" Schaltfläche auf meiner Website wie in Twitter. Aber diese Schaltfläche ist nur HTML ohne js. Ich weiß nichts über js/jquery/ajax. Kann mir jemand helfen, was soll ich tun, um dieses Formular ohne Seitenaktualisierung einzureichen? Vielen Dank.

Vorlage '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} 

Answer 1

Zuerst lernen Javascript und JQuery und Ajax besser zu verstehen. http://www.tutorialspoint.com/jquery/
http://www.w3schools.com/jquery/

Vorlage '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> 

Answer 2

ich mit dem obigen Kommentar zustimmen. Unten ist ein Tutorial, auf das ich gestoßen bin, als ich bei dieser Frage ein ausführlicheres Googlen durchgeführt habe. Es ist ein sehr voll funktionsfähige Anleitung:

The tutorial I wish I'd had when I was learning JQuery

Answer 3

Es ist unmöglich, Python eine serverseitige Sprache ist, und wenn Sie Daten bearbeiten möchten, müssen Sie die Informationen an den Server senden.

Das erste Mal, dass ich das tat, sah ich dieses Video in YouTube: https://www.youtube.com/watch?v=KgnPSmrQrXI