AJAX mit node.js arbeiten

Question

Ich habe diese POST-Anfrage für eine Registrierungsseite. Es prüft, ob ein Benutzername wird bereits von einem anderen Benutzer verwendet:

router.post ('/register', function(req, res) { 
User.findOne({username: req.body.username}, function(err, existingUser) { 
    if(existingUser) { 
     req.flash('errors1', req.body.username + ' already exists.'); 
     return res.redirect('/register'); 
    } 
//some more code down here if the username is unique 

Und hier ist die Form (Ich verwende EJS):

<form method="POST" action="/register"> 
    <% if (errors1.length > 0) { %> 
     <div class='form-group has-error'> 
      <label for="username">Stock Ticker</label> 
      <input type="text" name="username" class="form-control" id="username"/> 
      <span class="help-block"><%= errors1 %></span> 
     </div> 

Grundsätzlich, wenn der Benutzername nicht eingetragen ist Einmalig erscheint eine Nachricht direkt unter dem Formular, die dem Benutzer mitteilt, dass der Benutzername nicht verwendet werden kann. Aber diese Nachricht erscheint nur nach ein Benutzer hat die SUBMIT-Taste gedrückt.

Wie kann ich AJAX in diese integrieren? Ich habe AJAX noch nie wirklich benutzt und habe die Dokumentation und die Tutorials durchgesehen, aber ich kann mir einfach nicht vorstellen, wie ich AJAX in diesen Code integrieren könnte.

Answer 1

Sie sollten neue api erstellen das Kontroll und lösen diese Anforderung zu tun, wenn Eingangssteuerverlieren Fokus, vielleicht würde der Code dies unten mögen:

server.js:

router.post ('/check_username', function(req, res) { 
    //CODE:check your username 
}) 

html:

<div class='form-group has-error'> 
     <label for="username">Stock Ticker</label> 
     <input type="text" name="username" class="form-control" id="username"/> 
     <span class="help-block"><%= errors1 %></span> 
</div> 

js (JQuery):

$("#username").focusout(function(){ 
     var value = $("#username").val(); 
     //CODE:send the request and display result; 
     $.post('/check_username',{username:value},function(data){ 
     //CODE:handle result 
     }) 
    });