Flask 和 jQuery '$' 未定义

Question

我是编程新手，在解释当我尝试创建登录页面时不断出现的控制台错误时遇到困难。我有基本的登录页面，其中包含电子邮件和密码输入，以及显示登录页面和显示输入的烧瓶路线。我已经按照在线教程来完成这项工作，但是当我查看控制台时，我收到以下错误：test.js:1 Uncaught ReferenceError: $ is not defined at test.js:1根据教程，这应该可以工作。我的登录和登录提交路线如下所示@app.route("/login")def show_login():    return render_template("login.html")      @app.route('/login_submit', methods=['POST'])def login_submit():    """Log a user into the website"""    email = request.form.get('email')    password = request.form.get('password')    user = check_user_login_info(email, password)    print(user)        if (len(user) > 0):        name = user[0].first_name + ' ' + user[0].last_name        session['user_id'] = user[0].user_id        session['cart'] = {}        return jsonify({'login': name})        return jsonify({'invalid': 'Incorrect email or password'}) javascript 看起来像这样$(document).ready(function() {    $('form').on('submit', function(event) {        $.ajax({            data : {                name : $('#nameInput').val(),                email : $('#emailInput').val()            },            type : 'POST',            url : '/login_submit'        })        .done(function(data) {            if (data.error) {                $('#errorAlert').text(data.login).show();                $('#successAlert').hide();            }            else {                $('#successAlert').text(data.invalid).show();                $('#errorAlert').hide();            }        });        event.preventDefault();    });});在我的 HTML 中，如果我添加到表单中，action='/login_submit' method='POST'我会得到 jsonify 的输出，显示登录成功或无效 html 非常基本，看起来像这样<script src="/static/test.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  <h2>Log Into Your Account</h2>  <form >    <p>      Email <input type="text" id='emailInput' name="email">    </p>

Answer 1

这可能是由于 Jquery 导入放置在 HTML 文件中所致。test.js您在导致此类错误的文件之后导入 jQuery 。在顶部导入 jQuery 并重试。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="/static/test.js"></script> 

  <h2>Log Into Your Account</h2>

  <form >

    <p>

      Email <input type="text" id='emailInput' name="email">

    </p>

    <p>

      Password <input type="password" id='passwordInput' name="password">

    </p>

    <p>

      <button type="submit">Submit</button>

    </p>

  </form>

    <div id="successAlert" role="alert" style="display:none;"></div>

    <div id="errorAlert" role="alert" style="display:none;"></div>