Question

我一直在努力学习如何实现 AJAX，到目前为止我一直在修改这个 jQuery 示例。代码位于 static/js/form.js

(function ($, window, document) {
  /* globals window, jQuery, document, console */

  // enable this return statement to disable Ajax submission
  // return;

  $(document).ready(function () {
    var myForm = $('#myForm');


    myForm.on('submit', function (e) {
      e.preventDefault();
      var data = myForm.serialize();

      $.post('/my-ajax-endpoint', data, function (result) {
        if (result.success) {
          alert(result.message);
        } else {
          alert('Error: ' + result.message);
        }
        console.log(result);
      });
    })
  });
}(jQuery, window, document))

当我有上面这样的内联时，我的 html 可以工作：

<html lang="en">
  <head>
    <title>Flask-WTF + Ajax Example </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    {% block content %}{% endblock %}
    <script type="text/javascript">
      (function ($, window, document) {
        /* globals window, jQuery, document, console */

        // enable this return statement to disable Ajax submission
        // return;

        $(document).ready(function () {
          var myForm = $('#myForm');


          myForm.on('submit', function (e) {
            e.preventDefault();
            var data = myForm.serialize();

            $.post('/my-ajax-endpoint', data, function (result) {
              if (result.success) {
                alert(result.message);
              } else {
                alert('Error: ' + result.message);
              }
              console.log(result);
            });
          })
        });
      }(jQuery, window, document))

    </script>
  </body>
</html>

但是当我尝试将它引用为这样的外部文件时：

  <head>
    <title>Flask-WTF + Ajax Example </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type=text/javascript src="{{url_for('static', filename='js/form.js') }}"></script>
  </head>

它似乎没有做任何事情。我也试过把它放在 </body> 标签之前，但还是不行。

我没有任何 JavaScript 或 jQuery 的工作知识，所以如果它很简单，那么我提前道歉。 我正在学习 Flask，我想尝试在不刷新的情况下提交表单数据，它把我带进了这个兔子洞。

编辑：form.js 显示在控制台的源代码下，但完全空白？

Answer 1

我是您正在合作的 Flask Ajax Example 项目的作者。我添加了一个新分支，将 JS 移动到一个单独的文件中，该文件现在位于静态目录中：https://github.com/YellowSharkMT/flask-ajax-example/tree/example-with-static-js-file

我不能肯定问题可能出在哪里 - 您在上面的模板中使用的 url_for 函数应该已经解决了这个问题。在我的更新中，我只是将这一行添加到 home.html 模板中：

<script src="{{ url_for('static', filename='js/form.js') }}"></script>

这显然与您上面的内容几乎相同。我要添加的关于 Flask 的一件事是我的示例没有启用调试模式，我现在已经在单独的提交中启用了它。通过添加自动重新加载（python 服务器的）和不太积极的缓存等功能，它使开发更容易一些。继续检查那个分支，如果你有任何问题，请告诉我 - 祝你好运！

为什么我的 jQuery 内联工作而不是外部工作？

1 个答案: