Question

我的Flask应用程序中有一个表单。我需要通过Javascript（JS）协调表单提交。所需的行为是，在提交表单后，我们立即获得重定向，然后JS与Flask进行对话，Flask发送响应，JS更新DOM。

问题：表单未提交给JS。提交后，输入框中的文本将清除，页面位于此处。没有错误记录到控制台

尽管<script>标记顺序正确，它们在layout.html中的位置正确，并且http://localhost:5000/static/index.js显示了文件，但似乎忽略了我的JS。我插入了console.log语句来测试是否触发了适当的JS函数。一无所获。我将所有内容都封装在$(document).ready()中。依然没有。将method="post"属性放置在<form>标记中并将name属性放置在表单的input框中使我可以直接提交给Flask，但是我需要它去JS。所有这些都在我的机器上播放，所以没有CORS。我要去哪里错了？

必须先转至JS然后到烧瓶的表格

<div class="container">
    <div class="display-3">
        <strong>Create A Channel</strong>
    </div>
    <form id="channelForm" class="mt-4">
        <label for="channelName">Channel Name</label>
        <input id="channelName" class="form-control" type="text" placeholder="Enter Channel Name">
      <input type="submit" class="btn btn-primary" value="Create Channel">
    </form>
</div>

JS缩写

document.querySelector('#channelForm').onsubmit = () => {
    console.log("here");
    window.location.href = 'messages.html';

    // other stuff that links to Flask route

};

烧瓶路线

@app.route('/channels', methods=["GET", "POST"])
def channels():
    channelList = []
    if request.method == "POST":

        channel = request.form.get("channel")

        if not (channel is None) and not (channel in channelList):
            channelList.append(channel)
            print(channelList)
            return jsonify({"success": True, "channel":channelList})
        else:
            return jsonify({"success": False})

    else:
        return render_template("channels.html")

layout.html的头部

<head>
    {% block head %}
    <!-- Bootstrap 4 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <!-- Additional CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <!-- JS -->
    <script src="{{ url_for('static', filename='index.js') }}"></script>
    {% endblock %}
</head>

编辑当我点击按钮提交表单时，我在终端中看到"GET /static/index.js HTTP/1.1" 200 -。控制台中仍然没有任何内容，但是由于我单击了提交表单的按钮，所以我认为GET请求是不寻常的。正在期待POST。

Answer 1

问题是您的表单是通过HTTP协议（传统表单提交）而不是JS提交的。为防止这种情况，您需要停止单击按钮以提交表单：

var form = document.querySelector('#channelForm'),
    button = form.querySelector('input.btn-primary');

button.addEventListener('click', function(e) {
  e.preventDefault();
  console.log('process form data!');
})

此外，请将JavaScript包含内容放置在HTML包含内容之后，以便JS加载时，页面上将JS定位的元素显示在页面上。

Answer 2

可能正在发生的是来自服务器的响应比您想象的要快。您并没有阻止默认的onsubmit功能，因此实际上可能看不到JS在控制台中运行。为此，您可以尝试在导航设置之间打开保留日志。但是您可能需要阻止默认设置，然后将请求直接发送到服务器：

document.querySelector('#channelForm').onsubmit = (event) => {
  event.preventDefault()
  ...
  // AJAX request to your server with your data
};

表单提交被Javascript忽略，但被Flask接收

2 个答案: