Javascript Flask和jQuery'$'；没有定义

我是编程新手，在解释这个控制台错误时遇到了麻烦，当我尝试创建登录页面时，这个错误一直出现。我有一个带有电子邮件和密码输入的基本登录页面，还有一个显示登录页面和显示输入的flask路由。我遵循了一个在线教程来实现这一点，但我在查看控制台时发现以下错误：

test.js:1 uncaughtreferenceerror:$未在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'}) 

<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>

    <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>

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\u submit'method='POST'
中，我会得到jsonify的输出，说明登录成功或无效
html非常基本，如下所示

@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'}) 

<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>

    <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>


登录您的帐户

电子邮件


密码


提交

这可能是由于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>


登录您的帐户

电子邮件


密码


提交

哦，是的，这解决了问题！但不幸的是，它没有调用my/login_submit路由，它一直说“POST/login HTTP/1.1”405错误。编辑：我通过重新创建带有url更新的文件修复了它。非常感谢你，先生！添加
事件.preventDefault（）
作为提交事件回调函数后的第一行。