文章/答案/技术大牛

发布

社区首页 >问答首页 >表单提交后的Ajax

问表单提交后的Ajax
EN

Stack Overflow用户

提问于 2021-08-17 01:59:08

回答 1查看 46关注 0票数 1

在提交表单post成功后，如何执行ajax post。我想接受表单上提交的输入，根据该输入执行一些计算，并在不刷新页面的情况下在前端显示结果。

烧瓶

@app.route('/', methods=['GET', 'POST'])
def app_home():
    if request.method == 'POST':
        input_amount = request.form['input_amount']
        input_amount = float(input_amount)

        amount1 = input_amount * 12
        amount2 = input_amount * 10

        return render_template("index.html", amount1=amount1,amount2=amount2,)

    return render_template("index.html")

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

index.html

    <form method="post">
        <div class="mb-3">
            <label>Enter amount</label>
            <input name = "input_amount" type="text" class="form-control" placeholder="amount">
        </div>
        <button type="submit" class="btn btn-success">Submit</button>
    </form>

    
    <div class="container">
        <p id = "response">result is: ${{amount1}}</p>
        <p id = "response">result is: ${{amount2}}</p>
    </div>

AJAX请求

<script>
   $(document).ready(function () {
        $('form').on('submit', function (event) {
            $.ajax({
                data: { input_amount : input_amount},
                type: 'POST',
                url: '/'
            })
                .done(function (data) {
                    $('#response').text(data.output).show();
                    
                });
            event.preventDefault();
        });
    });
</script>

ajax

flask

python

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-17 18:44:49

根据documentation，正确的方法是不使用表单。老实说，你不想提交表格，对吧？您只需要传递输入值。

因此，我尝试了文档代码(因为我还在为我的应用程序研究这个"ajax + flask连接“)，这应该可以回答您的问题。创建了一个按钮类，因为你(和我)更喜欢按钮而不是链接。

app.py

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

@app.route('/_add_numbers')
def add_numbers():
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)
    return jsonify(result=a + b)

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

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $SCRIPT_ROOT = {{ request.script_root|tojson }};
    </script>

    <title>Document</title>

    <style>
      .button {
        background-color: #5b4caf;
        border: none;
        color: white;
        padding: 0.75rem 0.75rem;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        border-radius: 3px;
      }
    </style>
  </head>
  <body>
    <h1>jQuery Example</h1>
    <p>
      <input type="text" size="5" name="a" /> +
      <input type="text" size="5" name="b" /> = <span id="result">?</span>
    </p>

    <p>
      <a href="#" id="calculate" class="button">Calculate server side</a>

      <script>
        $(function () {
          $("a#calculate").bind("click", function () {
            $.getJSON(
              $SCRIPT_ROOT + "/_add_numbers",
              {
                a: $('input[name="a"]').val(),
                b: $('input[name="b"]').val(),
              },
              function (data) {
                $("#result").text(data.result);
              }
            );
            return false;
          });
        });
      </script>
    </p>
  </body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68810847

复制

相似问题

问表单提交后的Ajax
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单提交后的AjaxEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单提交后的Ajax
EN