Question

我正在尝试创建一个Dyanmic Form Builder。在构建过程之后，我试图通过脚本将所有表单数据放入JsonObject中并将其传递给烧瓶视图，以便我可以向用户显示它们。但我无法正确设置它。这是按钮调用javascript

sessionStorage.getItem('formData');

这是我进行ajax调用的脚本。

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

以下是我尝试在flask python中渲染的方法。

<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>

我的renderdorm（）方法将json对象作为参数，并为表单创建相应的html块。

但是当我以这种方式运行时，有时按钮操作会在脚本运行之前将我引导到/ preview路径并创建json对象。因此，这会导致会话的formdata为None。

任何想法如何将json对象传递给预览中的渲染？

Answer 1

您需要删除表单上的操作字段，因为当用户单击按钮操作时，调用会话可能无法设置

<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")

如何将Json Data从javaScript发送到Flask

1 个答案: