重定向并返回烧瓶中的数据

时间:2019-05-11 20:00:54

标签: javascript python api flask

我想做的是一旦表单发送完毕,就抓取发送的内容,并使用它来使用python抓取数据。然后想将该数据返回给javascript,以便可以将其绘制到我想要的html之一中。

app.py:

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/api/", methods=["GET", "POST"])
def api():
    if request.method == "POST":
        # run query
        stock_label = request.form["stock_label"] # search by name

        # Now use stock_label to get data from API.
        ts = TimeSeries(key=api_key, output_format='pandas')
        df, meta_deta = ts.get_daily(stock_label, outputsize="full")

        df.columns = ["open", "high", "low", "close", "volume"]
        print(df)
        data = [{"date": list(df.index.values)},
                {"close": list(df.close)}]  

    return jsonify(data)

首先,它将运行并呈现index.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Stock Screener</title>
    <!-- Importing all cdn -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div>
        <h2 class="text-center">Stock Screener</h2>

        <!-- Input for stock label -->
        <form method="POST" action="/api/" role="form">
            <label for="stockInput">Enter stock label</label>

            <!-- use js to store input into a variable. -->
            <input type="text" id="stockInput" name="stock_label" placeholder="Label">

            <!-- When submitted, run function(in python) -->
            <input type="submit" value="submit" id="stocklabelsubmit">
        </form>
        <div id="1_plot">

        </div>


    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="../static/js/index.js"></script>
</body>
</html>

现在index.html已呈现,我们可以看到输入框和提交按钮,我用“ AMZN”填充它,然后按提交。然后它将发送到@ app.route(/ api /)并在其中运行代码以从api检索数据并返回jsonify(data)。

我的问题是,一旦我单击“提交”,我就不希望它转到显示所有数据的/ api /页面,而我想回到index.html,在那里将使用/ api / < / p>

这是我的js:

var url = "/api/"
d3.json(url).then(function(data){
    var trace = {
        "x": data.date,
        "y": data.close,
        type: "scatter"
    };
    var data = [trace];

    Ploty.newPlot('1_plot', data);
});

它不会显示任何内容,我被困在/ api /路线上。有帮助吗?

0 个答案:

没有答案