文档未定义

Question

我一直在尝试为我正在创建的这个网站实现登录功能。我能够检查用户是否在数据库中。但是，如果用户不在数据库中，我想以如下形式显示一条消息； “未找到用户。”我正在尝试使用 jQuery，但我不断收到“未定义文档”错误。

我的 js 文件中的代码如下所示：

router.post('/login', function(req, res) {
    passport.authenticate('local', function(err, user, info) {
    if (err) { return next(err) }
        if (!user) {
            req.flash('error', info.message);
                $(document).ready(function() {
                    $("#label1").text("Hello world!");
                    $("#label1").css('color', 'red');
                });
                return res.redirect('/nouser')//called when no user found. to implement
        }
                    req.logIn(user, function(err) {
                        if (err) { return next(err); }
                        res.redirect(req.session.returnTo || '/');
                    });
        })(req, res);
});

我的表格是：

 <!-- Username & Password Login form -->
    <div class="user_login">
        <form id="login" action="/auth/login" method="post">
            <label id="label1">Email</label>
            <input name="email" type="email" />
            <br />

            <label>Password</label>
            <input name="password" type="password" />
            <br />

            <div class="action_btns">
                <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                 <input type="submit" class="btn btn_red" value="login">
            </div>
        </form>

        <a href="#" class="forgot_password">Forgot password?</a>
    </div>

我对网络编程非常陌生，任何帮助都将不胜感激。 谢谢。

Answer 1

“未定义 JavaScript 引用错误” 如前所述，有时只需定义一个变量即可解决问题。例如，给定上面的 jQuery 示例，我们可以调用 noConflict() 来恢复变量。

在 jQuery 初始化期间保存旧的 $ 引用； noConflict() 只是恢复它们。

但这超出了本文的重点。

问题是，简单地恢复一个变量或给它一个定义，尤其是当它与第三方依赖相关时，并不容易。

相反，问题通常可以通过以下两种方式之一解决。

1. 按正确顺序加载库 可以说，看到 ReferenceError 的最常见原因与我们的脚本引用了一个尚未定义的变量有关。

要解决此问题，通常是文件加载无序的问题，如果在具有自己的库的站点或 Web 应用程序的上下文中引发错误，则尤其如此，那么脚本可能是比您自己的加载时间晚。

这意味着脚本要么放在页面的 head 元素中，要么放在页面的页脚中。如果是这种情况，大多数框架和应用程序都提供了一个 API，用于设置文件的加载顺序、设置依赖项，然后定义它们在页面中的加载位置。

1. 利用未定义的值 另一个稍微复杂一点的例子是调用带有可选参数的函数，然后检查调用函数时是否定义了该参数。

例如，假设我们知道相关函数将在页面生命周期内的两个时间点被调用：

当 DOM 准备就绪时，并且可能在未定义因变量时 当页面加载并准备好时，并且可能已经定义了因变量。 为此，我们可以通过执行以下操作来利用 JavaScript 中的变量定义：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 函数 acmeReferenceError( valueExists ) { '使用严格';

if ( undefined === valueExists ) {

/* If this is hit, then the function is being invoked
 * before the variable in question has been defined.
 */

} 否则 {

/* If this particular conditional is hit, then the function
 * is being invoked after the value in question has
 * been defined.
 */

}

} 查看 GitHub 托管的 rawreference-error-not-defined.js 但是请注意，我们不是检查变量是真还是假，而是检查变量是否实际定义。

鉴于此，我们可以设置一个条件来执行无论是否存在变量都需要完成的任何工作。

最后，调用以下函数的方式如下：

假设您在定义值之前调用函数 acmeReferenceError();。 如果您在定义值之后调用该函数，那么您将调用 acmeReferenceError( foo );其中 foo 是定义的值。 最有可能的是，第一种情况将在 DOM 已加载但页面尚未准备好时调用，而第二种情况将在页面完全加载并准备好时调用。

第一个是最佳的，第二个不太理想 在使用 JavaScript 时，按相关顺序加载脚本总是一个更好的主意。话虽如此，我始终建议第一个选项是正确的，更理想的选项。

它不仅按照脚本的顺序工作，而且需要更少的文档和基于 JavaScript 的代码，因为应用程序层的脚本顺序显示并控制了事情的确切运行方式。

但是，在某些情况下，这是不可能的，或者环境的某些因素无法为您提供所需的控制，如果是这种情况，那么第二个选项是一个可行的解决方案。

但是，如果您最终走这条路，我强烈建议您在函数级别包含非常清晰的代码 cmets，以解释可选参数的用途、存在的原因以及应用程序的哪些方面需要这样做类似的东西。