讓AJAX與node.js一起工作

Question

我有這個POST請求註冊頁面。它檢查是否一個用戶名已被另一個用戶：

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 

這裏是形式（我使用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> 

基本上，如果輸入的用戶名不是獨特的，一條消息將出現在窗體的正下方，告訴用戶用戶名不能被使用。但是此消息僅在用戶點擊提交按鈕後才顯示。

我該如何將AJAX納入其中？我從來沒有真正使用過AJAX，並且一直在閱讀文檔和看教程，但我無法將自己的頭腦包裹在如何將AJAX納入這段代碼中。

Answer 1

您應該創建新的API做了檢查，並觸發該請求時輸入控制失去焦點，也許代碼想下面這樣：

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