jquery更新頁面與Flask返回html

我想提交表單數據到瓶使用jquery ajax請求，然後將返回的HTML添加到當前頁面。我試着根據其他線程的類似答案進行調整，但沒有任何工作。我沒有在控制檯中發現錯誤，只是沒有迴應。jquery更新頁面與Flask返回html

HTML腳本有：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
    <title></title> 
</head> 
<body> 
<h1>Add Numbers!</h1> 
<div id="bread"> 
    <form action="" id="numberAdd" role="form"> 
     <div id="content"> 
      <div id="bob"> 
       <label>Bob Has:</label> 
       <input type="text" id="bobNum" name="bob"> 
      </div> 
      <div id="sam"> 
       <label>Sam Has:</label> 
       <input type="text" id="samNum" name="sam"> 
      </div> 
      <button type="submit" id="num-butt">Submit</button> 
     </div> 
    </form> 
</div> 
<script> 
$(document).ready(function() { 
     $(":button").click(function(){ 
    $.post('/addNumber', $('form').serialize(), function(response){ 
     $('#reply').empty().append(response); 
     }); 
    }); 
    }); 

</script> 
<div id="reply"> 
</div> 
</body> 
</html>

瓶：

from flask import Flask, render_template, request 
app = Flask(__name__) 

@app.route('/') 
def homepg(): 
    return render_template('index.html') 

@app.route('/addNumber', methods=["GET", "POST"]) 
def addNums(): 
    x = int(request.form['bob']) 
    y = int(request.form['sam']) 
    z = x + y 
    return render_template('test.html',z=z) 

if __name__ == "__main__": 
    app.debug = True 
    app.run()

來源

2015-10-07 kmoses

的原因，你沒有看到點擊提交按鈕時，Ajax請求是因爲在同一時間的AJAX調用時，瀏覽器將表單提交回服務器，然後加載結果。

可以防止這種情況發生的幾個不同的方式，但在你的例子最簡單的是改變了按鈕式的，而不是爲「按鈕」，「提交」

<button type="button" id="num-butt">Submit</button>

來源

2015-10-07 06:58:12 keithb

謝謝！現在完美運作。 – kmoses

jquery更新頁面與Flask返回html

回答

相關問題