我正在尝试制作Dyanmic表单生成器。构建过程结束后,我尝试通过脚本将所有表单数据放入JsonObject中,并将其传递给flask View ,以便可以将其显示给用户。但是我无法正确设置。
这是调用javascript的按钮

<form action="/preview" method="post" role="form">
<button class="btn btn-primary" name = "submit" id = "submit">submit</button>
</form>

这是我进行ajax调用的脚本。
<script>
     $(document).ready( function() {
        $('#submit').click(function() {
           var formdata = serialize();
           $.ajax({
                 type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formdata),
                dataType: 'json',
                url: 'http://192.168.58.206:5000/index',
                success: function (e) {
                    console.log(e);
                },
                error: function(error) {
                console.log(error);
                }
                });
            });
        });
</script>

这是我尝试在 flask python中进行渲染的方法。
@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        asd = request.json
        session['formdata'] = asd
        if 'formdata' in session:
            return json.dumps({'success': True}), 200, {'ContentType': 'application/json'}
    return render_template("index.html")

@app.route('/preview', methods=['GET', 'POST'])
def preview():
    if 'formdata' in session:

        renderedform = formbuilder(json.dumps(session['formdata']))
        renderedform = renderedform.renderform()
        session.pop('formdata')
        return render_template("asd.html",renderform = renderedform)
    return "Error"

我的renderdorm()方法将json对象作为参数,并为表单创建相应的html块。

但是,当我以这种方式运行它时,有时按钮操作会将我定向到/preview路由,然后脚本开始运行并创建json对象。因此,这将导致 session 的formdata为None。

有什么想法我该如何传递该json对象以在预览中呈现?

最佳答案

您需要删除表单上的操作字段,因为当用户单击按钮操作时,可能不会设置 session

<form method="post" role="form">
<button class="btn btn-primary" name = "submit" id = "submit">submit</button>
</form>

然后在ajax上,您需要成功设置为窗口位置
  <script>
         $(document).ready( function() {
        $('#submit').click(function() {
           var formdata = serialize();
           $.ajax({
                 type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formdata),
                dataType: 'json',
                url: 'http://192.168.57.223:5000/createform',
                success: function (e) {
                    console.log(e);
                    window.location = "http://192.168.57.223:5000/preview";
                },
                error: function(error) {
                console.log(error);
            }
            });
        });
  });
    </script>

然后您的python脚本应如下所示,您需要说出您的值,而ajax会设置所需的窗口位置
@app.route('/index', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        asd = request.json
        print(asd)
        session['formdata'] = asd
        if 'formdata' in session:
            return json.dumps({'success': True}), 200, {'ContentType': 'application/json'}
    return render_template("createform.html")

关于javascript - 如何将Json数据从javaScript发送到Flask,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41848487/

10-08 22:14
查看更多