Javascript 将参数从JQuery发送到Flask

我试图将索引页上的输入（文本字段）中的数据发送回flask进行处理，并将处理后的数据返回到索引页

我可以在javascript中显示通过警报输入的值，但只要我尝试将其发送到flask，它就不会显示

这是我试图使用的代码

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);
           });
        });
  });

因此，当单击submit按钮时，它会向flask应用程序发送POST命令，其中包含文本字段中当前的内容（如index.html所示）。它等待响应并将其输出到“#reply”div

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()

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

@app.route（“/”）
def索引（名称=无）：
返回呈现模板（'index.html'，name=name）
@app.route（'/'，methods=[“GET”，“POST”]）
def serviceidlookup（服务ID）：
serviceid2=serviceid+“额外”
返回呈现模板（'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 %}

{%if serviceid%}
你好{{serviceid}}！
还有{{serviceid2}}！
{%else%}
你好，世界！
{%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>

x

一定是我把论点送到flask的时候弄错了，有人能发现问题吗

---

干杯。

我认为您的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()

static/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);
           });
        });
  });