Question

我正在使用Google App Engine。我有一个带有一些下拉列表的HTML文件，我也在那里使用Jinja。一个例子：

 <form action="/quest4" method="post" enctype="multipart/form-data">
            <select name="competition_name" id="competition_name" >
               <option value = "">Toutes les Compétition</option>
               {% for competition in CompetitionInData %}
               <option value="{{ competition.name }}">{{ competition.name }}</option>
               {% endfor %}
            </select>
         </form>

我使用python在服务器端工作。我想有两个或更多“级联下拉”我的意思是当用户在第一个下拉列表中选择了某个内容时，它会在数据存储区中搜索，然后填充第二个下拉列表而不重新加载页面。

我成功地开始了：当用户在第一个下拉列表中选择了某个东西时，它在服务器端隐藏了一个python函数，我从数据存储区获得了我想要的数据（三个单词的列表），现在我想像这三个词在第二个下拉列表中......

我该怎么做？

为了让用户在下拉列表中选择并启动python函数，我使用了以下代码：

<script>
function showHint(str) {
     if (str.length == 0) { 
         document.getElementById("txtHint").innerHTML = "";
         return;
     } else {
         var xmlhttp = new XMLHttpRequest();
         xmlhttp.onreadystatechange = function() {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                 document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
             }
         }
         xmlhttp.open("POST","/test123",true);
         xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         xmlhttp.send(str);
     }
}

</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
    <select name="day" id="day" onchange="showHint(this.value)">
        <option value = "">Toutes les journées</option>
               {% for day in day_int_sorted %}
               <option value="{{ day }}">{{ day}}</option>
               {% endfor %}
    </select>
</form>

<div id="txtHint">
[ImHERE]
</div>

当我在下拉列表中选择某些内容时，ID为“textHint”的div将填充python的答案（作为字符串）。问题是，这是一个字符串，我无法得到它或使用它与一些jinjaintération（我想做类似的事情：{％for element in response％}），响应由python函数填充）

我不知道我的问题的解释是否清楚。有人可以帮帮我吗？谢谢。

Answer 1

Jinja用于服务器端模板。 Javascript可用于处理从AJAX请求返回的数据（通常为JSON）并动态添加到您的页面。

如果您肯定需要使用Jinja，您可以更改您的AJAX请求调用的python处理程序以使用Jinja模板并返回html代码段而不是数据字符串。您仍然需要使用javascript将该代码段放入您的网页。

App Engine使用JS Ajax和jinja进行动态下拉

1 个答案: