servers.html

Question

Image of Template 经修订的版本 运行Windows Web服务器时，此功能无需烧瓶或python即可工作。但是我想学习使用python和flask做webdev。

我已经修改了JSON文件和HTML页面。我正在尝试在页面加载时将JSON数据加载到HTML下拉列表中。

其工作方式为：在ciscotp.html页面上的第一个下拉列表（建筑物）中选择建筑物后。各个端点将填充到第二个下拉列表（端点）列表中。

我已经使它可以在简单的Windows Web服务器上成功运行。

servers.html

{% extends "base.html" %}
{% block content %}

<title>Endpoints</title>

    <body>
        <div class="container" style="width:600px;">
            <h2 align = "center">Select The Building And Endpoint.</h2><br /><br />
                <label for = "full_name" class="required" >Building :</label>

                <select name="building" id ="buildings" class="form-control input-lg" onchange="populateEndpointList()">
                    {% for buildings in ciscotp %}
                    <option value="{{ buildings.ciscotp }}" SELECTED>{{ buildings.building }}Select Building<option>
                    {% endfor %}
                </select>



                <br />
                <label for = "full_name" class="required" >Endpoint :</label>
                <select name="endpoint" id="endpoint" class="form-control input-lg">
                    {% for building in collabtp %}
                        <option value="{{ location.ciscotp }}">{{ location.parent_id }}Select Building<option>
                    {% endfor %}
                    <!--<option value="">Select Endpoint</option> -->>
                </select>

        </div>
    </body>
{% block scripts %}

    {% endblock %}

    {% endblock %}

collabEp.json ================================================== ===================== [ { “ id”：“ 1”， “ object_ID”：“ f1”， “ building”：“ AirFac”， “ parent_id”：“ 0”

    },
        {
        "id":"2",
        "object_ID":"f1",
        "building":"Ferries Sports Bar",
        "parent_id": "0"

    },
    {
        "id":"3",
        "object_ID":"f1",
        "building":"Clenical",
        "parent_id":"0"
    },

    {
        "id":"4",
        "object_ID":"f1",
        "building":"SouthWest Busses",
        "parent_id":"0"

    },
        {  
        "id":"15",
        "location": "Sim Room",
        "ip": "10.*.*.*",
        "parent_id": "0",
        "type": "Cisco"
    },
    {  
        "id":"16",
        "location": "2083 - Sim Classroom",
        "ip": "10.*.*.*",
        "parent_id": "0",
        "type": "Cisco"
    },
    {  
        "id":"17",
        "location": "2083 - Conference Room 1",
        "ip": "10.*.*.*",
        "parent_id": "3",
        "type": "HP"
    },
    {  
        "id":"18",
        "location": "3089 - Conference Room 3",
        "ip": "10.*.*.*",
        "parent_id": "3",
        "type": "HP"
    },
    {  
        "id":"19",
        "location": "2059 - Conference Room",
        "ip": "10.*.*.*",
        "parent_id": "2",
        "type": "Dell"
    }

================================================ =======================

Routs.py

import json
from datetime import datetime
from flask import Flask, render_template, url_for, jsonify, request
from flask_json import FlaskJSON, JsonError, json_response, as_json
from app import app


@app.route('/index', methods=['GET', 'POST'])


@app.route('/')
def index():
    return render_template('index.html', )

@app.route('/ciscotp', methods=['GET', 'POST'])
def ciscotp():
    if request.method == 'POST':
        return redirect(url_for('index'))
    return render_template('ciscotp.html')

# Load the file into memory
with open("app/static/js/collabEp.json", "r") as f:
    data = json.load(f)
#print (data)

# Return the JSON in the template
@app.route("/")
def buildingEp():
    return render_template("ciscotp.html", servers=data)


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

Answer 1

您可以使用Jinja2模板来实现相同的目的，而不是使用JavaScript来填充端点。在端点的select块中，您可以像这样：

{% for server in servers %}
    <option value="{{ server.ip }}">{{ server.location }}</option>
{% endfor %}

然后在服务器端，您需要像这样将服务器加载到内存中：

# Load the file into memory
with open("servers.json", "r") as f:
    data = json.load(f)

# Return the JSON in the template
@app.route("/")
def index():
    return render_template("index.html", servers=data)

这会将JSON数据字典传递到Jinja2模板引擎中进行渲染。然后它将评估模板中的for循环以生成所有选项。有关模板的更多信息，请参见docs。有关Jinja2模板文档，请参见here。

使用jinja和flask将JSON导入到Dependent Drop Down select

servers.html

Routs.py

1 个答案: