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>&nbsp;&nbsp; <h2>Log Into Your Account</h2>&nbsp; <form >&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; Email <input type="text" id='emailInput' name="email">&nbsp; &nbsp; </p>&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; Password <input type="password" id='passwordInput' name="password">&nbsp; &nbsp; </p>&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; <button type="submit">Submit</button>&nbsp; &nbsp; </p>&nbsp; </form>&nbsp; &nbsp; <div id="successAlert" role="alert" style="display:none;"></div>&nbsp; &nbsp; <div id="errorAlert" role="alert" style="display:none;"></div>