2016-08-19 83 views
0

我在頁面上製作了一個簡單的HTML表單,我想從表單中收集所有數據,將其轉換爲JSON,然後在新頁面上顯示該JSON 。我不需要或者不需要數據庫來保存這些數據,我只是希望它以適當的JSON格式吐出一個新的頁面,以便使用它的人可以複製/粘貼這些數據。在新頁面上使用Flask顯示HTML表單數據爲JSON

我用瓶,這裏是HTML表單我做了擴展另一個基本佈局頁:

{% extends "layout.html" %} 
    {% block content %} 
     <div class="container"> 
     <form action="/display" method="post" id="employForm" 
     <fieldset> 
     <label>First Name 
      <input type="text" name="firstName" placeholder="Joe" required> 
     </label> 
     <label>Last Name 
      <input type="text" name="lastName" id="lastName" placeholder="Schmoe" required> 
     </label> 

     <label> 
     Department 
      <select name="department" required> 
      <option value="sales">Sales</option> 
      <option value="marketing">Marketing</option> 
      <option value="developer">Developer</option> 
      <option value="business">Business Relations</option> 
      <option value="sysAdmin">Systems Administration</option> 
      <option value="drone">Drone</option> 
      </select> 
     </label> 
      ... goes on 
     </fieldset> 
     <button class="button-primary" type="submit" value="Submit" form="employForm">SUBMIT!</button> 
    </form> 
    </div> 
    {% endblock %} 

形式是長於一點,幷包含多種不同類型的表單數據。這裏是服務器端的東西(我製作的燒瓶應用程序):

from flask import Flask, render_template, request, jsonify 

app = Flask(__name__) 

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

@app.route('/display', methods=["GET", "POST"]) 
def display(): 
    result = request.form 
    return render_template('display.html', result=result) 


if __name__ == "__main__": 
    app.run(host='0.0.0.0') 

我覺得我很接近。此刻,我打提交後我重定向到顯示頁面,並將其打印出類似如下(根據輸入的答案的特定數據的變化,很明顯):

ImmutableMultiDict([('startDate', u'2016-08-03'), ('employmentStatus', u'intern'), ('firstName', u'Hola'), ('lastName', u'Schmoe'), ('department', u'marketing'), ('location', u'SanFran'), ('inNYC', u'Yes'), ('requests', u'Blah blah try this.')]) 

我已經做了相當多的在堆棧溢出和其他地方搜索...我遇到的問題是,他們都提供了一個例子,一個人只想收集他們的形式,而不是整個形式的一個或兩個鍵。

此外,爲了我的特殊目的,我強烈希望將數據作爲JSON返回並顯示在display.html頁面上。

僅供參考,這裏有一些我看了看,這些問題並沒有完全的幫助:

How to post data structure like json to flask?

Getting form data from html form using flask and python

Flask request and application/json content type

Send Data from a textbox into Flask?

任何指導非常感激。謝謝!

+0

如果這就是你所做的一切,那麼你不需要Flask。你可以用HTML和JavaScript來完成這一切。 – dirn

+0

你能解釋一下你的意思嗎?您是否在談論使用GET而不是POST並使用JavaScript分配單擊事件?如果是這樣,我想到了這個選擇,但最終決定我想練習使用python/Flask。此後這可能會變成更復雜的項目,所以我決定使用Flask是更好的主意。 – RHdev

+0

否。如果您所做的只是在頁面上將表單字段顯示爲JSON,則不需要發出任何HTTP請求。您可以使用JavaScript來捕獲表單提交併將字段轉換爲JSON(使用類似[jQuery的'serializeArray'](http://api.jquery.com/serializeArray/))。 – dirn

回答

0

我看你導入jsonify ...你可以使用...

@app.route('/display', methods=["GET", "POST"]) 
def display(): 
    return jsonify(request.form) 

或者你可以在你的模板中使用的toJSON過濾

{{ result | tojson }}

result = json.dumps(request.form)

我想任何o如果那些會起作用。

+0

我試過第二個選項,它工作,謝謝!我會稍微嘗試其他選項並提供我的反饋。 – RHdev