2017-08-09 168 views
5

這裏是我的流量到目前爲止與WTF形式的工作和更新後的用戶活動的狀態:如何在UI狀態更改時更新wtf-form狀態?

在我template.html我:

<form action="{{ url_for('page') }}" method="POST"> 
    <select id="sel_id" name="name1" onchange="this.form.submit();"> 
    ... 
    </select> 
</form> 

... 而在views.py我得到:

@app.route('/') 
@app.route('/process', methods=['GET', 'POST']) 
def process(): 
    form = NoNameForm() 
    if request.method == 'POST': 
     if 'name1' in request.form:       
      form.colors = int(request.form['name1']) 

在這種情況下,這是使用WTF窗體並更新變量(如form.colors)的正確方法嗎? 我想知道是否可以直接在「onchange」一段js代碼中更新form.colors

+2

如果我理解正確,'colors'的形式是另一個領域,對不對?在這種情況下,是的,你可以在直接使用javascript發送之前更新該字段的值,但直接在html文件中直接在'onchange'中執行它並不是好的形式,建議至少將js分開,至少在'腳本'標籤中。也就是說,我不確定你想要完成什麼。 –

回答

3

我不認爲有一個在這種情況下「正確」的方式 - 正確的方式取決於你想達到什麼。

答:如果 - 例如 - 你不想因爲某些原因而亂搞JavaScript,並且你不介意重新加載頁面,那麼你可以像你在代碼示例中那樣做。

B.。如果只是想重新加載頁面更改窗體顏色那麼我會說這是一個開銷和簡單的JS腳本會更優雅,方便用戶在這種情況下,另一方面。

編輯來回答COMMENT問題:

你能解釋一下關於 '重新加載頁面' 那個東西?

當你的瀏覽器中使用標準的HTTP方法與服務器通信(如GET和POST)來交換數據,則必須重新加載服務器獲得響應(這是一個回答您的要求)後的頁面。另一方面,如果你的頁面使用AJAX(異步JavaScript和XML),那就不是這種情況。在話題援引Wikipedia

使用Ajax的Web應用程序可以發送數據和從 服務器異步(後臺)檢索,而不與 顯示和現有網頁的行爲干預。通過將數據交換層與表示層的數據解耦,Ajax允許Web頁面以及擴展Web應用程序動態更改內容 ,而無需重新加載整個頁面。

如果我決定使用JS並且不重新加載頁面,我會在選項'A'中做些什麼?

無論哪種方式都有其優點和缺點,由您決定哪條路要走。

援引this文章:

阿賈克斯的主要優點:
1。這讓事情變得短而快。
2.擺脫重新加載頁面。
3.實時應用非常有用得多。
4.降低服務器負載並節省帶寬。

Ajax的主要缺點:
1.書籤問題。
2.對SEO很不好。
3.屏幕閱讀器不能訪問阿賈克斯。
4.只有現代瀏覽器都支持它,如果JavaScript並不是在用戶端啓用,您的網站看起來會比較難看。

是否使用JS意味着它不會重新加載頁面?
如果您使用Ajax與服務器和JS進行數據交換,把結果在您的網站,然後是 - 不需要重新加載。

回到你的代碼示例 - 如果你只是爲了演示的原因而改變表單的顏色,並且它對你的應用程序來說並不重要,那麼就沒有理由去做它的服務器端。

+0

你能解釋一下關於'重新加載頁面'的事嗎?如果我決定使用JS並且我不重新加載頁面,我在選項'A'中會放鬆什麼?使用JS意味着它不會重新加載頁面? – sramij