如何使用 AJAX API 调用检查用户名是否在 Mongo Schema 中使用

Question

我正在尝试创建一个注册表单，其中潜在用户正在输入他们想要的用户名，它会检查现有的 Mongo DB 用户模式以查看该确切名称是否存在。

我的表格在这里：

                    <form class="needs-validation" action="/register" method="POST" novalidate>
                      <div class="text-center mb-3">
                        <p class="lead">Welcome to the team! We just need a few things to get started.</p>
                        <div class="row">
                          <div class="col-md-6 mb-4">
                            <div class="form-outline">
                              <input
                                     type="text"
                                     id="first_name"
                                     name="first_name"
                                     class="form-control"
                                     required
                                     />
                              <label class="form-label" for="first_name"
                                     >First name</label
                                >
                              <div class="valid-feedback">Looks good!</div>
                              <div class="invalid-feedback">Thats not right</div>
                            </div>
                          </div>
                          <div class="col-md-6 mb-4">
                            <div class="form-outline">
                              <input
                                     type="text"
                                     id="last-name"
                                     name="last-name"
                                     class="form-control"
                                     required
                                     />
                              <label class="form-label" for="last-name"
                                     >Last name</label
                                >
                              <div class="valid-feedback">Looks good!</div>
                              <div class="invalid-feedback">Thats not right</div>
                            </div>
                          </div>
                        </div>
        
                      <!-- Email input -->
                      <div class="form-outline mb-4">
                        <input
                               type="email"
                               id="register_email"
                               name="register_email"
                               class="form-control"
                               required
                               />
                        <label class="form-label" for="register_email">Email</label>
                        <div class="valid-feedback">Looks good!</div>
                        <div class="invalid-feedback">Thats not right</div>
                      </div>
                      <div class="text-center mb-3">
                          <div class="form-outline mb-4">
                            <input type="text" id="register_username" name="register_username" class="form-control" placeholder="enter your username" required />
                            <label class="form-label" for="register_username">Username</label>
                            <div id="username-check"></div>
                          </div>
                          <!-- Password input -->
                          <div class="form-outline mb-4">
                            <input type="password"  id="register_password" name="register_password" class="form-control" required/>
                            <label class="form-label" for="register_password">Password</label>
                            
                            
                          </div>
                      </div>
                      <!-- Submit button -->
                      <div class="text-center">
                          <button type="submit" id="register" class="btn btn-lg btn-rounded bg-insider link-dark mb-3 fw-bold" disabled>
                        Lets Go! <i class="fa-solid fa-gauge-max"></i>
                      </button>
                      </div>
                      
                    </form>

我有这个脚本代码在页面上工作以获取用户输入并检查应该检查我的 MongoDB 的获取路线：

$('#register_username').on('keyup', function () {
  $.get('/usercheck?username=' + $(this).val().toLowerCase(), function (response) {
    $('#username-check').text(response.message);
    console.log('')
    var btn = document.getElementById('register');
    btn.disabled = true;
  

    if ($('#username-check').html() === "user exists") {
      $('#username-check').text('username not available').css('color', 'red');
    }
    else {
      console.log($('#register_username').val())
      $('#username-check').text('username is available').css('color', 'green');
        btn.disabled = false;
      
    }
  })
});

这是它调用来检查数据库的路由：

var express     =   require("express"),
    router      =   express.Router(),
    passport    =   require("passport"),
    User        =   require("../models/user");

router.get('/usercheck', function(req, res) {
    console.log(req.query);
    User.findOne({username: req.query.register_username}, function(err, username){
        if(err) {
          console.log(err);
        }
        var message;
        if(username) {
          console.log(username);
            message = "user exists";
            console.log(message);
        } else {
            message= "user doesn't exist";
            console.log(message);
        }
        res.json({message: message});
    });
});
module.exports = router;

如果这有帮助，这是数据库中的用户模式：

var mongoose = require("mongoose");
var passportLocalMongoose = require("passport-local-mongoose");

var UserSchema = new mongoose.Schema({
   username: String,
   password: String,
   email: String,
   isAdmin: { type: Boolean, default: false }
});

UserSchema.plugin(passportLocalMongoose);

module.exports = mongoose.model("User",UserSchema);

我不确定我错过了什么，但任何事情都会非常有帮助。 提前致谢！

Answer 1

就这样可以成功关闭这个问题：将/usercheck?username=更改为/usercheck?register_username=成功了，因为此查询参数以下列形式使用：

$('#register_username').on('keyup', function () {
  $.get('/usercheck?register_username=' + $(this).val().toLowerCase(), function (response) {
    $('#username-check').text(response.message);
    console.log('')
    var btn = document.getElementById('register');
    btn.disabled = true;
  

    if ($('#username-check').html() === "user exists") {
      $('#username-check').text('username not available').css('color', 'red');
    }
    else {
      console.log($('#register_username').val())
      $('#username-check').text('username is available').css('color', 'green');
        btn.disabled = false;
      
    }
  })
});