表单提交被 Javascript 忽略，但被 Flask 拾取答案

【问题标题】：Form submission ignored by Javascript, but picked up by Flask表单提交被 Javascript 忽略，但被 Flask 拾取
【发布时间】：2018-09-06 15:52:28
【问题描述】：

我的 Flask 应用中有一个表单。我需要通过 Javascript (JS) 调解表单提交。期望的行为是，在提交表单时，我们会立即获得重定向，然后 JS 与 Flask 对话，Flask 发送响应，JS 更新 DOM。

问题：表单没有提交给 JS。提交时，输入框中的文本会被清除，页面就在那里。没有错误记录到控制台

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

必须先到 JS 再到 Flask 的表单

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

【问题讨论】：

我知道您提到您已准备好文件并且一切正常，但我会再次检查。我刚刚将 html 和 javascript 粘贴到 CodePen 中，console.log 出来就好了。
你测试的是什么浏览器？
这可要了我的命。这是其他人第二次测试正常。我在最新的 Chrome 中。 flask_sockets-io 包也在运行，这似乎把一切都搞砸了。有人提到猴子补丁。我正在寻找一个例子。
刚刚在 Firefox 中尝试过。还是什么都没有。

标签： javascript html flask

【解决方案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 加载时位于页面上。

【讨论】：

喜欢这个？ var form = document.querySelector('#channelForm'), button = form.querySelector('input.btn-primary'); // 通道创建 form.onsubmit = () => { button.addEventListener('click', function(e) { e.preventDefault(); console.log('处理表单数据！'); }); console.log("这里"); window.location.href = 'messages.html';
几乎；像这样：gist.github.com/duhaime/b15e9a2e2e2907b090a184a5e41aedbd
没有变化。为了确定，我可能不得不从太空中使用核武器，然后重新开始。不过，我会继续采纳您的建议。
它正在读取 js 文件，因为它发现了一个语法错误。它只是跳过所有控制台日志和实际代码。
@Ryan，当您进行上述更改时，您是否在控制台中看到“将您的 js 移至 html 下方”的消息？是否有控制台警告或日志？

【解决方案2】：

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

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

【讨论】：

没有变化，但感谢您的尝试。