jQuery在与烧瓶一起交付时不起作用,但不起作用

时间:2018-02-28 17:10:13

标签: python jquery flask

我对python很新,甚至没有经验丰富的烧瓶,我无法弄清楚这个问题。我有以下简单的网页,其中包含jQuery功能,当我双击文件并在浏览器中打开它时效果很好:

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#updateBtn").on("click", function() {
                text = "<h2>The div has been updated!</h2>";
                $("#jQuery_div").html(text);
            });
        });
    </script>
    <div>
        <h1>This is a non-jQuery div</h1>
    </div>
    <div id="jQuery_div">
        <h2>This div should update with jQuery</h2>
    </div>
    <button id="updateBtn">update</button>
</body>
</html>

但是,当flask在localhost:5000上传递网页时,jQuery功能不再存在。我的python如下:

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def render():
    return render_template("jquery_test.html")

if __name__ == "__main__":
    app.run(port=5000, debug=True)

我的应用程序的文件树是:

/AJAX_practice
    ajax_practice.py
    /templates
        jquery-3.3.1.js
        jquery_test.html

当我无法得到“回声”时,我试图关注this tutorial。按钮工作。在我的调试工作中,我已经慢慢消除并大大简化了程序到上面的代码,看看为什么我不能让我的jQuery通过烧瓶工作。我还是不知所措。我在IDLE中按F5运行烧瓶应用程序,在Python 2.7.13 Shell中没有错误,终端(我用$ sudo idle开始IDLE)显示:

my ip - - [date and time] "GET / HTTP/1.1" 200 -
my ip - - [date and time] "GET /jquery-3.3.1.js HTTP/1.1" 404 -

由此,我最好的猜测是烧瓶找不到jquery.3.3.1.js文件,虽然我已经尝试将它放在文件树中的任何地方而没有运气。我不能将脚本src用于https以获取jQuery依赖项,因为我的服务器最终将位于非Internet连接的LAN上。我是在正确的轨道上吗?如果是这样,烧瓶如何查找和/或导航jQuery依赖项?任何人都可以指出一些可能有助于我对这个问题的基本理解的文档吗?

非常感谢任何有关此事的帮助。

3 个答案:

答案 0 :(得分:0)

过去,这对我来说一直对Flask有用:

df[~pd.DataFrame(df.array.tolist()).isnull().all(1)]
Out[391]: 
  name                                            array
1    B  [111.425818592, -743.060293425, -180.420675659]

&#39;静态&#39;是它所在的文件夹的名称(以及&#39; static&#39;文件夹位于我项目的根目录中)。您可以对其进行编辑以适合您的首选结构和命名,因此请更改静态&#39;到&#39;模板&#39;如果你喜欢保留你的jquery文件,尽管我建议把它保存在HTML模板的一个单独的文件夹中,纯粹是为了保证你的项目井井有条。

答案 1 :(得分:0)

我相信jquery的路径应该是/templates/jquery-3.3.1.js

当我在服务jquery时,在我的烧瓶服务器上,它有来自主目录的完整路径:/static/js/jquery.min.js

答案 2 :(得分:0)

您正在尝试从模板文件夹中提供JavaScript文件。添加静态文件夹并使用它来提供静态内容。

在你的情况下创建一个类似&#34; static / js / jquery.min.js&#34;

的目录结构

然后像这样添加脚本引用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="location" data-lat="51.503454" data-lng="-0.119562"></div>
<div class="location" data-lat="51.499633" data-lng="-0.124755"></div>

看到这个: http://exploreflask.com/en/latest/static.html

如果您不想将其保留在&#34;静态&#34;文件夹并使用另一个本地目录,您可以使用<script src="{{url_for('static', filename='js/jquery.min.js')}}"></script> ,如下例所示: https://stackoverflow.com/a/20648053/2118215