将参数从 JQuery 发送到 Flask答案

【问题标题】：Send arguments from JQuery to Flask将参数从 JQuery 发送到 Flask
【发布时间】：2015-02-09 01:12:04
【问题描述】：

我正在尝试将索引页上的输入（文本字段）中的数据发送回烧瓶进行处理，并将处理后的数据返回到索引页。

我可以在 javascript 中显示通过警报输入的值，但是一旦我尝试将其发送到烧瓶它就不会显示。

这是我尝试使用的代码。

script.js

因此，当单击提交按钮时，它会向烧瓶应用程序发送一个 POST 命令，其中包含当前文本字段中的任何内容（显示在 index.html 中）。它等待响应并将其输出到“#reply”div

$('#submit').click(function(){
  $.post("/serviceidlookup", {serviceid1: document.getElementById("field")}).done(function (reply) {
    $('#reply').empty().append(reply);
});

flaskapp.py

第一部分设置带有文本输入和提交按钮的索引页面。第二部分是由前面的 JQuery 脚本调用并传递参数的函数。它呈现 lookup.html 页面并将其返回到 JQuery 脚本（然后将其输入到“#right”div）

@app.route('/')
def index(name=None):
    return render_template('index.html', name=name)

@app.route('/<serviceid>', methods=["GET", "POST"])
def serviceidlookup(serviceid):
    serviceid2 = serviceid + " extra"
    return render_template('lookup.html', serviceid=serviceid, serviceid2=serviceid2)

lookup.html

这将获取由“serviceidlookup”函数传递给它的值，如前所述

{% if serviceid %}
<h1>Hello {{ serviceid }}!</h1>
<h1>And also {{ serviceid2 }}!</h1>
{% else %}
<h1>Hello World!</h1>
{% endif %}

index.html

这包含用于发送信息的测试字段和按钮。它还包含由 JQuery 填充的“#right” div

<div id="searchContainer">
<input id="field" name="field" type="text" />
<div id="delete"><span id="x">x</span></div>
<input id="submit" type="submit" value="Search" />
</div>

<div id="reply">
</div>

一定是我将参数发送到烧瓶时做错了，有人能发现问题吗？

干杯。

【问题讨论】：

标签： javascript jquery python flask

【解决方案1】：

我认为您的 Javascript 甚至没有被触发 - 您的 script.js 中有语法错误（如果您使用的是 Google Chrome，则可以在 javascript 控制台中查看语法错误）。

我已按如下方式重写了您的应用程序，以使其按预期工作：

flaskapp.py

from flask import Flask, render_template, request

app = Flask(__name__)
app.debug=True

@app.route('/')
def index(name=None):
    return render_template('index.html', name=name)

@app.route('/serviceidlookup', methods=["GET", "POST"])
def serviceidlookup():
    serviceid = request.form.get('serviceid')
    serviceid2 = serviceid + " extra"
    return render_template('lookup.html', serviceid=serviceid, serviceid2=serviceid2)

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

静态/script.js

  $(document).ready( function() {
        $('#submit').click(function() {
           var serviceid = document.getElementById("field").value;
           $.post(
              "/serviceidlookup",
              { serviceid: serviceid }
           ).done(function (reply) {
              $('#reply').empty().append(reply);
           });
        });
  });

【讨论】：