Javascript 在Flask App中添加Ajax后，文本不随render_模板更改_Javascript_Python_Ajax_Flask_Flask Wtforms

Javascript 在Flask App中添加Ajax后，文本不随render_模板更改

javascript python ajax flask

Javascript 在Flask App中添加Ajax后，文本不随render_模板更改,javascript,python,ajax,flask,flask-wtforms,Javascript,Python,Ajax,Flask,Flask Wtforms,我创建了一个简单的AJAX，在不刷新页面的情况下将数据发送到flask路由，数据似乎到达了路由，但在呈现模板后不会更改文本 MyForm是一个简单的下拉列表。我试图在提交表单或单击按钮后显示当前选择的文本，而不使用AJAX刷新页面 run.py from flask import Flask, redirect, render_template, request, jsonify from forms.myform import MyForm import json import plotly

我创建了一个简单的AJAX，在不刷新页面的情况下将数据发送到flask路由，数据似乎到达了路由，但在呈现模板后不会更改文本

MyForm是一个简单的下拉列表。我试图在提交表单或单击按钮后显示当前选择的文本，而不使用AJAX刷新页面

run.py

from flask import Flask, redirect, render_template, request, jsonify
from forms.myform import MyForm
import json
import plotly
import pandas as pd, numpy as np

server = Flask(__name__)

server.config.update(dict(
    SECRET_KEY="powerfulsecretkey",
    WTF_CSRF_SECRET_KEY="a csrf secret key"
))

@server.route("/", methods=["POST", "GET"])
def index():
    form = MyForm()
    choice = request.form.get('options')
    if form.validate_on_submit():
        choice = request.form.get('options')

    print(choice)

    return render_template("index.html", form=form, choice=choice)


if __name__ == "__main__":
    server.run()

表格

from flask_wtf import FlaskForm
import wtforms


class MyForm(FlaskForm):
    options = wtforms.SelectField(label="State", choices=[("SF", "SF"),
                                                          ("LA", "LA")])

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="POST" id="fm" action="/">
    {{ form.csrf_token }}
    <div>{{ form.options}}</div>
</form>
<button type="submit" form="fm" value="Submit">Submit</button>
<div>{{ choice }}</div>
</body>

<footer>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
          $('form').on('submit', function(e){
                $.ajax({
                    type: 'POST',
                    data:$('form').serialize(),
                    url: '/',
                    success: function(data) {
                        console.log(data);
                    },
                    error: function(jqXHR) {
                        alert("error: " + jqXHR.status);
                        console.log(jqXHR);
                    }
                });
                e.preventDefault();
             });

            // Inject our CSRF token into our AJAX request.
            $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ form.csrf_token._value() }}")
                }
            }
        })

    </script>
</footer>


</html>


标题
{{form.csrf_token}
{{form.options}}
提交
{{choice}}
$（'form'）。关于（'submit'，函数（e）{
$.ajax({
键入：“POST”，
数据：$（'form'）。序列化（），
url:“/”，
成功：功能（数据）{
控制台日志（数据）；
},
错误：函数（jqXHR）{
警报（“错误：+jqXHR.status”）；
console.log（jqXHR）；
}
});
e、 预防默认值（）；
});
//将我们的CSRF令牌注入到我们的AJAX请求中。
$.ajaxSetup({
发送前：功能（xhr、设置）{
if（！/^（获取| HEAD | OPTIONS | TRACE）$/i.test（settings.type）和&！this.crossDomain）{
setRequestHeader（“X-CSRFToken”，“{{form.csrf_token.\u value（）}}”）
}
}
})

浏览器

因为您是由ajax提交的表单，所以页面不会重新呈现，Jinja2是一个要生效的呈现