node.js & jade - Erstellen einer Post-Anfrage und Anzeigen der Ergebnisse auf derselben Seite ohne Umleitung

Question

Ich habe node.js Express-Web-Anwendung, die die CRUD-Operationen auf Knopfdruck ausführt. Hier muss ich einen Datensatz basierend auf der Eingabe des Benutzers aktualisieren. Dazu muss ich das Detail vom Benutzer eingeben, die vorhandenen Werte des Datensatzes auf derselben Seite anzeigen und den Benutzer auffordern, ob er die Daten ändern möchte.

Wenn ja, dann muss ich die Werte vom Benutzer eingeben und aktualisieren. Ist es möglich, dies in einer einzigen Jade-Datei zu haben, wo ich die Eingabewerte vom Benutzer bekomme.

Jade-Datei:

extends ../layout 

block content 
    .page-header 
    h3 Updation 

    form.form-horizontal(role='form', method='POST') 
    h4 Enter the employee id for which you want to update the details 
    input(type='hidden', name='_csrf', value=_csrf) 

    .form-group 
     label(class='col-sm-2 control-label', for='empid') Emp ID 
     .col-sm-2 
     input.form-control(type='text', name='empid', id='empid', autofocus=true) 
    .form-group 
     .col-sm-offset-2.col-sm-2 
     button.btn.btn-primary(type='submit') 
      i.fa.fa-pencil 
      | Get details 

Ich habe diese Datei, wo ich den Mitarbeiter-ID von dem Benutzer immer bin und mache die Post-Anforderung. Ich bin mir nicht sicher, wie ich die Antwort auf diese Seite selbst rendern und zur Änderung von Details auffordern soll.

Jede Hilfe wäre willkommen.

Answer 1

Ja, Sie können dies tun, aber nicht mit einem Formular, das gesendet wird, weil dann Ihre Seite weg ist.

Stattdessen können Sie eine Schaltfläche in Ihre Seite einfügen, die eine AJAX-Anforderung an das Back-End sendet, und bei Rückgabe der AJAX-Anforderung können Sie einige Teile Ihrer Seite dynamisch durch die zurückgegebenen Daten ersetzen. Natürlich können Sie alle Daten, die der Benutzer in die AJAX-Anfrage eingegeben hat, einbeziehen.

Da dies alles im Frontend passieren soll, können Sie dies nicht in Jade tun. Stattdessen müssen Sie Ihrer Seite ein Skript hinzufügen, das im Browser des Clients die gewünschten Funktionen erfüllt. Hier

ist ein Beispiel dafür, wie dies zu erreichen:

Setzen Sie diese in einer Datei namens ajax.jade:

mixin ajaxFunction 
    script. 
    function changeState(url, buttonid) { 
     $.ajax({url: url}).done(function (data) { 
     $('#' + buttonid).parent().html(data); 
     }); 
    } 

mixin ajaxButton(id, url, buttonLabel) 
    a.btn.btn-primary.btn-xs.btn-block(id='#{id}', 
     href='javascript:changeState(\'#{url}\', \'#{id}\')') #{buttonLabel} 

Jetzt können Sie diese mixin setzen überall auf Ihrer Seite. (Stellen Sie sicher, dass die Schaltflächen-ID auf der gesamten Seite eindeutig ist und keine Leerzeichen enthält!). Auf klicken, wird sie ersetzen sich mit dem, was das Backend zurückgegeben:

include ajax 

+ajaxButton("myButton", "/some/url", "Klick me!") 

Answer 2

Nicht sicher, ob es einen Weg gibt ist, dass der Jade egine teilweise die Jade-Vorlage machen kann, wenn eine Möglichkeit gibt, das zu tun ist, in der Regel können Sie verwenden Ajax, dies zu tun. Formular hinzufügen Submit-Ereignis-Listener, in dem Sie event.preventDefaut() festlegen können, um Standard-Senden-Prozess zu stoppen, auf diese Weise können Sie Seiten neu laden verhindern.