Submit ohne refresh in django

ich habe ein html-Formular und der submit-button Hinzugefügt oder entfernt relations in manytomanyfield „Benutzer“):

{% 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>

in 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,})

Diese Funktion funktioniert gut, aber die Seite wird aktualisiert nach dem Absenden. Ich brauche nicht aktualisieren und ich brauche zu ändern, button-text wie „Folgen“ – button in Twitter. Ich habe versucht, einige jquery\ajax, aber ich weiss nicht genau verstehen, wie es funktionieren sollte. Kann bitte jemand erklären, wie es zu tun? Danke.

  • Kannst du die ajax – /javascript-Sie haben versucht, das nicht funktioniert? Welcher Fehler war es die Herstellung?
  • ich denke Dinge, die ich ausprobiert habe absolut nicht das Gefühl, so dass ich einfach nicht verstehen, was zu tun ist, um diese submit-button so etwas wie twitter follow button
InformationsquelleAutor worm2d | 2016-03-24



One Reply
  1. 3

    Hier ist eine sehr einfache ajax-Beispiel. In Ihrem Formular können Sie feuern Sie Ihre ajax-Methode mit:

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

    Dann wird die ajax-Methode würde wie folgt Aussehen:

    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
    
        });
    }

    Empfehle ich Blick auf die Ajax-Dokumentation zu sehen, all die Ajax-Methoden zur Verfügung.

    Auch, aus Ihrer Sicht, müssen Sie zurück (in diesem Beispiel) json-Daten über eine HttpResponse. also

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

    *Beachten Sie, dies ist nicht getesteten code.

    • wo soll ich dieses ajax-Methode?
    • Irgendwo unterhalb des Formulars oder in einem externen .js-Datei. Wenn Sie eine externe .js-Datei, die Sie offensichtlich nicht in der Lage sein zu verwenden Djangos template-syntax für die event.id, aber Sie können eben passieren, dass als argument zu AjaxFormSubmit
    • wo sind in diesem code entfernen und hinzufügen von Werten im GET-query?
    • Auch werde ich schlage vor, Sie verwenden eine POST-Methode, da Sie das hinzufügen/entfernen von Datensätzen, und Sie müssen auch übergeben, Formular-Daten durch die Methode mit einem argument Daten. Ich werde aktualisieren, meine Antwort. Ich empfehle auch das Experimentieren mit Ajax zunächst um eine Idee zu bekommen, wie es funktioniert. Versuchen Sie eine get-Anforderung mit ihm und der Rückkehr nichts anderes als ein boolean aus einer Sicht. Dann werden Sie wissen, Ihre Position in die richtige Richtung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.