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