Question

我是Flask和整体Web开发的新手。我有一个简单的Web应用程序，当我设置查询时，它将在家里显示数据。但是，当我从表单提交参数时，提交数据表和图表不更新时，它们完全空白。如何使数据表和图表更新。此外，所有js都在静态文件夹下。我花了很多时间研究ajax和jquery，但没有运气。任何示例将不胜感激。

<script>
  rfmchart({{ rfm_score|safe }},{{ rfm_month|safe }},15);
  df_data({{ fin|safe }});
</script>

function df_data(dataset) { 
$(document).ready(function() {
    $('#dataTable').DataTable( {
       "ordering": false,
        data: dataset,
        columns: [
            { title: "ID" },
            { title: "Market" },
            { title: "Sale" }
        ]
    } );
} )
};

Chart.js函数

// RFM Chart
var ctxx = document.getElementById("rfm_chart");

function rfmchart(val,lbs,max_tick) {
var rfm_chart = new Chart(ctxx, {
  type: 'line',
  data: {
   labels :lbs,
    datasets: [{
      label: "RFM",
      lineTension: 0.3,
      backgroundColor: "rgba(37, 63, 131,0.7)",
      borderColor: "rgba(2,117,216,1)",
      pointRadius: 5,
      pointBackgroundColor: "rgba(23,117,33,1)",
      pointBorderColor: "rgba(255,255,255,0.8)",
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(2,117,216,1)",
      pointHitRadius: 50,
      pointBorderWidth: 2,
      data : val,
    }],
  },
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: max_tick,
          maxTicksLimit: 5
        },
        gridLines: {
          color: "rgba(0, 0, 0, .125)",
        }
      }],
    },
    legend: {
      display: false
    }
  }
})

};

App.py

## This works!!
@app.route('/',methods=['POST','GET'])
def home():

    loc = 15158
    fin = fin_data(loc)
    rfm_month,rfm_score = rfm_data(loc)
    return render_template('home.html',fin_data = fin,rfm_month=rfm_month,rfm_score = rfm_score)

## Does not work    
@app.route('/plt',methods=['POST','GET'])
def get_plt():
    if request.method=='POST':
        result=request.form
        loc = result['loc']
        fin = fin_data(loc)
        rfm_month,rfm_score = rfm_data(loc)
    return render_template('home.html',fin_data = fin,rfm_month=rfm_month,rfm_score = rfm_score)

HTML

<script>
  rfmchart({{ rfm_score|safe }},{{ rfm_month|safe }},15);
  df_data({{ fin|safe }});
</script>

提交表格后更新chart.js和datatable

0 个答案: