從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

回答

相關問題