Flask jQuery不起作用

Question

我有一個問題，當我運行此代碼時，什么都不是燒瓶服務器的原因，因為如果我停止服務器並更改url（因為在燒瓶中它是靜態的），它將起作用。

我的html / javascript代碼：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>

    <link href="/static/jquery.min.js" type="text/javascript" />
    <style type="text/css">
      <!-- ${demo.css} -->
    </style>
    <link href="/static/highcharts.js" type="text/javascript" />
    <link href="/static/exporting.js" type="text/javascript" />
    <script type="text/javascript" >
    $(function () {
    datasAxisX=['2014-10-07 23:43:19','2014-10-07 23:43:20','2014-10-07 23:43:20','2014-10-07 23:43:21','2014-10-07 23:43:23','2014-10-07 23:43:24','2014-10-07 23:43:24','2014-10-07 23:43:25','2014-10-07 23:43:25','2014-10-07 23:43:25','2014-10-07 23:43:25','2014-10-07 18:52:41','2014-10-07 18:52:41','2014-10-07 18:52:41','2014-10-07 18:52:42','2014-10-07 18:52:42','2014-10-07 18:52:42','2014-10-07 18:52:42'];

    datasAxisY = [296.134,275.982,281.109,273.363,292.042,274.022,286.898,271.463,279.182,279.805,272.717,272.192,268.225,270.166,271.432,270.803,275.939,272.748];

    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Statistiques sur la longueur des produits'
        },
        subtitle: {
            text: 'Du 23/09/2014 au 26/09/2014'
        },
        xAxis: {
            categories: datasAxisX,
            tickInterval: 5 /*on affiche l'abscisse tous les 5 points*/
        },
        yAxis: {
            title: {
                text: 'longueur (mm)'
            },
            min: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            alternateGridColor: null,
            plotBands: [{ // zone bleue produit toléré variation longueur
                from: 6,  //val min tolérée
                to: 9,    //val max tolérée
                color: 'rgba(68, 170, 213, 0.1)',   //couleur de la zone
                label: {
                    text: 'variation longueur tolérée',
                    style: {
                        color: '#606060'   //ou c'est celle la la couleur de la zone?
                    }
                }
            }]
        },
        tooltip: {
            valueSuffix: ' mm' //unité lorsqu'on zoom sur un point particulier de la courbe (dans le carré qui apparait)
        },
        plotOptions: {
            spline: {
                lineWidth: 4,  //épaisseur de la courbe
                states: {
                    hover: {
                        lineWidth: 5 //aucune idée
                    }
                },
                marker: {
                    enabled: false
                },
            }
        },
        series: [{
            name: 'Longueur produit',
            data: datasAxisY

        }],
        navigation: {
            menuItemStyle: {
                fontSize: '10px'
            }
        }
    });
});
    </script>
  </head>
  <body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
  </body>
</html>

和我的server.py：

#! /usr/bin/python            
# -*- coding:utf-8 -*-               

from flask import Flask, json, request, render_template, jsonify
app = Flask(__name__)

@app.route("/addition", methods=['GET', 'POST'])
def get_data():
    return render_template('test.html')

if __name__ == '__main__':
    app.run(debug=True)

更新：

我的導演很好，也許您不能將src放進燒瓶？

├── server.py
├── static
│   ├── csvChart.js
│   ├── exporting.js
│   ├── highcharts.js
│   └── jquery.min.js
└── templates
    ├── test.html
    ├── test.html~
    ├── test_javascript_separate.html
    └── test_save.html

Answer 1

您正在使用<link>標記。 鏈接標記不會加載代碼，它們只能用於加載樣式以及標記導航和其他元數據關系。

使用<script>標記代替：

<script src="/static/jquery.min.js" type="text/javascript"></script>

更妙的是，讓Flask為靜態資源生成正確的URL：

<script src="{{ url_for('static', filename='jquery.min.js') }}" type="text/javascript"></script>

請參閱Flask快速入門的“ 靜態文件”部分。

Flask jQuery不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2015-02-02 10:01:20

Flask jQuery不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2015-02-02 10:01:20

解決方案1
1 已采納 2015-02-02 10:01:20