从JQuery发送参数到Flask

我试图将数据从我的索引页上的输入（文本字段）发回烧瓶进行处理，并将处理后的数据返回到索引页。从JQuery发送参数到Flask

我可以显示通过JavaScript中的警报输入的值，但只要我尝试将它发送到烧瓶它不显示。

这是我正在尝试使用的代码。

的script.js

所以被点击提交按钮时，它发送一个POST命令与目前无论是在文本字段中的烧瓶应用（index.html中示出）。它等待响应，并输出到“#reply”格

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

flaskapp.py

的这第一部分建立与文本输入索引页面，并提交按钮。第二部分是由以前的JQuery脚本调用并传递参数的函数。它呈现lookup.html页面，并返回到jQuery脚本（然后将其输入到“#right”格）

@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的

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

现在一定是我做错了与发送的参数烧瓶，任何人都可以发现一个问题填写在“#right”分区？

干杯。

来源

2015-02-09 Billiam

我认为你的Javascript甚至没有被触发 - 你的script.js中有语法错误（如果你使用谷歌浏览器，你可以在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); 
      }); 
     }); 
    });

来源

2015-02-09 02:31:59

从JQuery发送参数到Flask

回答

相关问题