个人中心
gpt4 book ai didi

javascript - 将数组从 Flask 传递到 Javascript 以创建下拉菜单选项

转载 作者：行者123 更新时间：2023-12-03 10:03:51 26 4
gpt4 key购买 nike

我是 Flask 和 Javascript 新手。我正在尝试上传文件并使用其中一列作为下拉菜单中的选项。有不对的地方请指正。

代码如下:

flask :

from flask import Flask, render_template, redirect, url_for, request, flash, send_from_directory
from werkzeug import secure_filename
import os
import pandas as pd
import numpy as np
import json

UPLOAD_FOLDER = 'uploads/'
ALLOWED_EXTENSIONS = set(['csv'])

app = Flask(__name__)

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['data_file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

            data = pd.read_csv(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            names = data['some_column']
            return redirect(url_for('drop_down', names=names))
            #return render_template('drop_down.html', names=names)
    return render_template('file_upload.html')

@app.route('/meta')
def drop_down():
    return render_template('drop_down.html')

Javascript:

function my_script(){
    console.log('script called.');
    //var cars = ["Volvo","Ferrari","Audi","BMW","Mercedes","Porche","Saab","Avanti"];
    var cars = {{ names|safe }};
    console.log('cars assigned.');

    function make_drop_down(list_of_names, element_id){
        select_elem = document.getElementById(element_id)
        if(select_elem){
            for(var i = 0; i < list_of_names.length; i++) {
                var option = document.createElement('option');
                option.innerHTML = list_of_names[i];
                option.value = list_of_names[i];
                select_elem.appendChild(option);
            }
        }       
    };

    console.log("Making Drop Downs!!");
    make_drop_down(cars, 'drop_down_1');
    make_drop_down(cars, 'drop_down_2');
    console.log("Made Drop Downs!!");

};

html:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="static/drop_down.js"></script>
    <title>DROP DOWN</title>    
</head>
    <body onload="my_script()">
        <select id="drop_down_1">
            <option>Choose Option 1</option>

        </select>

        </br></br>

        <select id="drop_down_2">
            <option>Choose Option 2</option>

        </select>


    </body>
</html>

我在控制台上收到以下错误:ReferenceError:my_script 未定义

最佳答案

有两个问题。

第一个是您没有在 View 处理 /meta

中传递汽车列表 
@app.route('/meta')
def drop_down():
   return render_template('drop_down.html')

这可能看起来像这样:

@app.route('/meta')
def drop_down():
   cars = ["Volvo","Ferrari","Audi","BMW","Mercedes","Porche","Saab","Avanti"]
   return render_template('drop_down.html',
                          names=cars)

第二个问题是您的 javascript 将无法访问该列表，除非您在调用该函数时将其传递。

html

<body onload="my_script({{ names }})">

JavaScript

function my_script(names){
   console.log('script called.');
   var cars = names;
   ...

编辑:

处理 View 的函数就是需要传递数据的函数。您还可以使用上传文件中被注释掉的部分，它使用必要的数据调用 render_template...，但这感觉不是一个“好的”方法。

您需要使数据可供您的 drop_down() View 使用，方法是将其存储在数据库中、从此函数中读取文件中的数据或将其存储在 session 中。这样您就可以将数据与模板一起传递

关于javascript - 将数组从 Flask 传递到 Javascript 以创建下拉菜单选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30458354/

26 4 0
文章推荐： javascript - 我可以通过 JS API 从 Google map (再次)加载 KML 数据吗？
文章推荐： c++ - 为什么这个 C++ 代码片段将一个值分配给一个右值编译？
文章推荐： c++ - 为什么接受默认的 noexcept 移动构造函数？
文章推荐： javascript - 如何将弹出窗口添加到 highchart 中的标志？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com