用flask render_template()傳遞參數(shù)

Question 1

我需要顯示一些選擇選項。一旦選擇了類別，我想用另一個選擇顯示子類別。

我的flask代碼

def return_panim():
    panim = ["", "????? ????? ????", "????? ????", "????? ?????? ????", "????? ????? ????? ??????", "????? ???? ????'??? ????????", "????? ???? ????'??? ????? ????"]
    data = """
        <label>???????</label>
        <select id="subCategory" onchange="loadDoc()">"""
    for pan in panim:
        data = data + '<option value=' + '"' + pan + '"' + ">" + '"' + pan + '"' + '</option>'
    data = data + '</select>'
    return data


def return_categories():
    category_list = ["", "????? ????", "????? ???? ????", "????? ???? ?????????", "????? ????", "??????", "??????", "?????", "????? ?????"]
    data = """
        <label>?? ???????</label>
        <select id="category" onchange="loadDoc()">"""
    for category in category_list:
        data = data + '<option value=' + '"' + category + '"' + '>' + category + '</option>'
    data = data + "</select>"    
    return data

@app.route("/appoint", methods=["GET", "POST"])
def apple(name=None):
    if request.method == "POST":
        r = request.get_data().decode("utf-8")
        print(r)
        if r ==  "????? ????":
            print(return_panim())
            return render_template("appoint.html",  data_category=return_categories(), data_subcategory=return_panim())
    return render_template("appoint.html",  data_category=return_categories())

我的客戶端

<html>
<head>
</head>
<body>
{{ data_category | safe }}
{{ data_subcategory | safe }}
<script>
  function loadDoc() {
    let encoder = new TextEncoder();
  const xhttp = new XMLHttpRequest();
  var sel = document.getElementById("category");
  var text = sel.value;
  xhttp.open("POST", "https://www.annastudio.beauty/appoint", true);
  xhttp.send(encoder.encode(text));
}
</script>
</body>
</html>

當我試圖無條件返回時

@app.route("/appoint", methods=["GET", "POST"])
def apple(name=None):
    return render_template("appoint.html",  data_category=return_categories(), data_subcategory=return_panim())

它將渲染兩個選擇。

Question 2

我認為您不必為此任務(wù)使用Ajax。

以下示例使用兩個字段集。根據(jù)在第一個select元素中所做的選擇，使用JavaScript啟用或禁用第二個字段集。禁用的字段集使用CSS隱藏。

如果不想使用字段集，可以以相同的方式禁用和啟用各個輸入字段。

from enum import Enum, unique
from flask import (
    Flask, 
    redirect, 
    render_template, 
    request
)

@unique 
class Categories(str, Enum):
    OPTION1 = "????? ????"
    OPTION2 = "????? ???? ????"
    OPTION3 = "????? ???? ?????????"
    OPTION4 = "????? ????"
    OPTION5 = "??????"
    OPTION6 = "??????"
    OPTION7 = "?????"
    OPTION8 = "????? ?????"

@unique 
class SubCategories(str, Enum):
    OPTION1 = "????? ????? ????"
    OPTION2 = "????? ????"
    OPTION3 = "????? ?????? ????"
    OPTION4 = "????? ????? ????? ??????"
    OPTION5 = "????? ???? ????'??? ????????"
    OPTION6 = "????? ???? ????'??? ????? ????"

app = Flask(__name__)

@app.route('/appoint', methods=['GET', 'POST'])
def appoint():
    if request.method == 'POST':
        category = request.form.get('category', Categories.OPTION1, type=lambda x: Categories[x])
        subcategory = request.form.get('subcategory', type=lambda x: SubCategories[x])
        print(category.value)
        print(subcategory and subcategory.value)
        return redirect(request.url)
    return render_template(
        'appoint.html', 
        categories=Categories, 
        subcategories=SubCategories
    )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Appoint</title>
    <style>
        fieldset[disabled] {
            display: none;
        }
    </style>
</head>
<body>
    
    <form method="post">
        <fieldset name="basics">
            <label for="category">Category</label>
            <select name="category" id="category">
                {% for cat in categories -%}
                <option value="{{ cat.name }}">{{ cat.value }}</option>
                {% endfor -%}
            </select>
        </fieldset>
        <fieldset name="extended">
            <label for="subcategory">Subcategory</label>
            <select name="subcategory" id="subcategory">
                {% for cat in subcategories -%}
                <option value="{{ cat.name }}">{{ cat.value }}</option>
                {% endfor -%}
            </select>
        </fieldset>
        <button type="submit">Submit</button>
    </form>

    <script>
        (function() {

            const triggerVal = {{ categories.OPTION1.name | tojson }};
            const selectElem = document.getElementById('category');
            const fieldsetElem = document.querySelector('fieldset[name="extended"]');
            selectElem.addEventListener('change', function() {
                fieldsetElem.disabled = this.value !== triggerVal;
            });

        })();
    </script>
</body>
</html>

Answer 1

我認為您不必為此任務(wù)使用Ajax。

以下示例使用兩個字段集。根據(jù)在第一個select元素中所做的選擇，使用JavaScript啟用或禁用第二個字段集。禁用的字段集使用CSS隱藏。

如果不想使用字段集，可以以相同的方式禁用和啟用各個輸入字段。

from enum import Enum, unique
from flask import (
    Flask, 
    redirect, 
    render_template, 
    request
)

@unique 
class Categories(str, Enum):
    OPTION1 = "????? ????"
    OPTION2 = "????? ???? ????"
    OPTION3 = "????? ???? ?????????"
    OPTION4 = "????? ????"
    OPTION5 = "??????"
    OPTION6 = "??????"
    OPTION7 = "?????"
    OPTION8 = "????? ?????"

@unique 
class SubCategories(str, Enum):
    OPTION1 = "????? ????? ????"
    OPTION2 = "????? ????"
    OPTION3 = "????? ?????? ????"
    OPTION4 = "????? ????? ????? ??????"
    OPTION5 = "????? ???? ????'??? ????????"
    OPTION6 = "????? ???? ????'??? ????? ????"

app = Flask(__name__)

@app.route('/appoint', methods=['GET', 'POST'])
def appoint():
    if request.method == 'POST':
        category = request.form.get('category', Categories.OPTION1, type=lambda x: Categories[x])
        subcategory = request.form.get('subcategory', type=lambda x: SubCategories[x])
        print(category.value)
        print(subcategory and subcategory.value)
        return redirect(request.url)
    return render_template(
        'appoint.html', 
        categories=Categories, 
        subcategories=SubCategories
    )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Appoint</title>
    <style>
        fieldset[disabled] {
            display: none;
        }
    </style>
</head>
<body>
    
    <form method="post">
        <fieldset name="basics">
            <label for="category">Category</label>
            <select name="category" id="category">
                {% for cat in categories -%}
                <option value="{{ cat.name }}">{{ cat.value }}</option>
                {% endfor -%}
            </select>
        </fieldset>
        <fieldset name="extended">
            <label for="subcategory">Subcategory</label>
            <select name="subcategory" id="subcategory">
                {% for cat in subcategories -%}
                <option value="{{ cat.name }}">{{ cat.value }}</option>
                {% endfor -%}
            </select>
        </fieldset>
        <button type="submit">Submit</button>
    </form>

    <script>
        (function() {

            const triggerVal = {{ categories.OPTION1.name | tojson }};
            const selectElem = document.getElementById('category');
            const fieldsetElem = document.querySelector('fieldset[name="extended"]');
            selectElem.addEventListener('change', function() {
                fieldsetElem.disabled = this.value !== triggerVal;
            });

        })();
    </script>
</body>
</html>

用flask render_template()傳遞參數(shù)

熱門問答

React應(yīng)用程序，其中nginx返回空白頁

向JSON屬性添加路徑

如何在兒童Flutter中的List.map()中使用if語句？

其余python代碼與FastAPI不兼容

釋放雙鏈接列表

父表和子表上的觸發(fā)器以及執(zhí)行順序

在Jest中，如何利用mock數(shù)據(jù)來測試HTTP請求

JavaWeb中Filter攔截失效原因是什么？在線等

`git reset --hard`和`git clean`在清理工作區(qū)時有何不同

NtQueryInformationProcess獲取所有進程名稱

死緩期間沒有故意犯罪的,兩年期滿后減為

求各位，怎么實現(xiàn)類似git提交記錄來比較兩個數(shù)組的差異性？

用flask render_template()傳遞參數(shù)

熱門問答

React應(yīng)用程序，其中nginx返回空白頁

向JSON屬性添加路徑

如何在兒童Flutter中的List.map()中使用if語句？

其余python代碼與FastAPI不兼容

釋放雙鏈接列表

父表和子表上的觸發(fā)器以及執(zhí)行順序

在Jest中，如何利用mock數(shù)據(jù)來測試HTTP請求

JavaWeb中Filter攔截失效原因是什么 ？在線等

`git reset --hard`和`git clean`在清理工作區(qū)時有何不同

NtQueryInformationProcess獲取所有進程名稱

死緩期間沒有故意犯罪的,兩年期滿后減為

求各位，怎么實現(xiàn)類似git提交記錄來比較兩個數(shù)組的差異性？

React應(yīng)用程序，其中nginx返回空白頁

如何在兒童Flutter中的List.map()中使用if語句？

在Jest中，如何利用mock數(shù)據(jù)來測試HTTP請求

JavaWeb中Filter攔截失效原因是什么？在線等

求各位，怎么實現(xiàn)類似git提交記錄來比較兩個數(shù)組的差異性？