我一直在努力学习如何实现 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 显示在控制台的源代码下,但完全空白?
答案 0 :(得分: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 服务器的)和不太积极的缓存等功能,它使开发更容易一些。继续检查那个分支,如果你有任何问题,请告诉我 - 祝你好运!