Question

我正在尝试使用jquery ajax请求将表单数据提交到flask，然后将返回的html添加到当前页面。我已根据其他线程上的类似答案尝试调整，但没有任何作用。我没有在控制台中收到错误，只是没有回应。

html with script：

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

Answer 1

单击“提交”按钮时您没有看到ajax请求的原因是因为同时进行了ajax调用，浏览器正在将表单提交回服务器，然后加载结果。

您可以通过几种不同的方式防止这种情况发生，但您示例中最简单的方法是将按钮类型更改为＆＃34;按钮＆＃34;而不是＆＃34;提交＆＃34;

?"["

使用Flask的jquery更新页面返回了html

1 个答案: