如何將Json數據從javaScript發送到Flask

Question

我正在嘗試制作Dyanmic表單生成器。 構建過程結束后，我試圖通過腳本將所有表單數據放入JsonObject中，並將其傳遞給Flask視圖，以便向用戶顯示它們。 但是我無法正確設置。 這是調用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>

這是我嘗試在燒瓶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對象。 因此，這將導致會話的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")