App Engine 使用 JS Ajax 和 django 进行动态下拉答案

【问题标题】：App Egine use JS Ajax and jinja to have dynamic dropdownApp Engine 使用 JS Ajax 和 django 进行动态下拉
【发布时间】：2014-12-09 15:20:38
【问题描述】：

我正在开发 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 的答案（作为字符串）。问题是这是一个字符串，我无法获取它或将其与一些 jinja 集成（我想做类似的事情：{% for element in response %}），响应由 python 函数填充）

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

【问题讨论】：

标签： javascript python ajax google-app-engine jinja2

【解决方案1】：

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

如果您确实需要使用 Jinja，您可以更改您的 AJAX 请求正在调用的 python 处理程序以使用 Jinja 模板并返回一个 html sn-p 而不是您的数据字符串。您仍然需要 javascript 来将该 sn-p 放入您的页面。

【讨论】：