Flask系列：不写一行Javascript实现省市区三级联动

Flask系列

今天要给大家介绍一个非常牛的 JavaScript 库,htmx^[1]。

htmx 允许你使用属性直接在 HTML 中访问 AJAX、CSS 转换、WebSockets 和服务器发送事件，所以你可以用超文本的简单和强大构建现代用户界面

htmx 很小(~10k min.gz)，无依赖，可扩展，兼容 IE11。

今天就给大家介绍下它的一个应用，不写一行 Javascript 代码，实现省市区 3 级联动的例子，后台可以选择你擅长的，今天我仍然使用 Flask。

`index.html`

<html>
    <header>
    <script src="https://unpkg.com/htmx.org@1.6.1"
integrity="sha384-tvG/2mnCFmGQzYC1Oh3qxQ7CkQ9kMzYjWZSNtrRZygHPDDqottzEJsqS4oUVodhW"
crossorigin="anonymous"></script>

        <style>
            div {
                border-style: solid;
                border-color: rgb(3, 3, 122);
                border-width: 5px;
                margin-right: 10px;
                padding-top: 20px;
                padding-left: 20px;
                font-size: x-large;
                height: 60px;
                width:300px;
                float: left;
            }
        </style>
    </header>

    <body>

        <div>
            <label>Province</label>
                <select name="province" hx-get="/cities/"
                hx-target="#cities" hx-indicator=".htmx-indicator"
  id ="provinces" hx-trigger="change, load" >
                {% for province in provinces %}
                    <option value="{{ province.code }}">{{ province.name }}</option>
                {% endfor %}
                </select>
        </div>

        <div>
            <label>City</label>
                <select id="cities" name="city" hx-get="/areas/"
                hx-trigger="change, htmx:afterSettle" hx-target="#areas"
                hx-indicator=".htmx-indicator">
                    {% for city in cities %}
                    <option value="{{ city.code }}">{{ city.name }}</option>
                    {% endfor %}
                </select>
        </div>

        <div>
            <label>Area</label>
                <select id="areas">
                    {% for area in areas %}
                    <option value="{{ area.code }}">{{ area.name }}</option>
                    {% endfor %}
                </select>
        </div>
    </body>
</html>

从上面的 html 模版代码可以看到，我们需要引入一个 html js 库

                <select name="province" hx-get="/cities/"
                hx-target="#cities" hx-indicator=".htmx-indicator"
  id ="provinces" hx-trigger="change, load" >

这个 select tag 比标准 html 多了些内容

hx-get="/cities/" 发送 GET 请求到 /cities/
hx-target="#cities" 刷新目标，本文是刷新 id 为 cities tag.
hx-indicator=".htmx-indicator" 发送 AJAX 请求时，让用户知道后台正在执行
hx-trigger="change, load" 触发条件，当内容改变和加载的时候触发

`app.py`

from flask import Flask, render_template, request,render_template_string
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

app.config.from_object("config")
db = SQLAlchemy(app)

@app.route('/')
@app.route('/index.html')
def index():
    provinces = db.session.execute("SELECT * FROM province order by code")
    return render_template('index.html', provinces=provinces)

@app.route('/cities/', methods=['GET'])
def get_cities():
    templ = """
    {%for city in cities %}
        <option value="{{ city.code }}">{{ city.name }}</option>
    {% endfor %}
    """
    province = request.args.get("province")
    cities = db.session.execute("SELECT * FROM city WHERE provinceCode=:province",{"province":province})
    return render_template_string(templ, cities=cities)

@app.route('/areas/', methods=['GET'])
def get_areas():
    templ = """
    {%for area in areas %}
        <option value="{{ area.code }}">{{ area.name }}</option>
    {% endfor %}
    """
    city = request.args.get("city")
    areas = db.session.execute("SELECT * FROM area WHERE cityCode=:city",{"city":city})
    return render_template_string(templ, areas=areas)