Javascript App-Egine使用JS-Ajax和jinja创建动态下拉列表_Javascript_Python_Ajax_Google App Engine_Jinja2

Javascript App-Egine使用JS-Ajax和jinja创建动态下拉列表

javascript python ajax google-app-engine

Javascript App-Egine使用JS-Ajax和jinja创建动态下拉列表,javascript,python,ajax,google-app-engine,jinja2,Javascript,Python,Ajax,Google App Engine,Jinja2,我正在开发谷歌应用程序引擎。我有一个带有下拉列表的HTML文件，我在里面也使用了Jinja。例如： <form action="/quest4" method="post" enctype="multipart/form-data"> <select name="competition_name" id="competition_name" > <option value = "">Toutes les

我正在开发谷歌应用程序引擎。我有一个带有下拉列表的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的答案。问题是这是一个字符串，我无法获取它或将它与一些jinja intération一起使用。我想这样做：{%for response%}中的元素由python函数填充响应

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

Jinja用于服务器端模板。Javascript可用于处理AJAX请求返回的数据，通常作为JSON，并将其动态添加到页面中

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