我们在 Python GAE 中使用两个下拉列表作为应用程序的导航系统，用户可以从第一个下拉列表中选择应用程序，然后从第二个下拉列表中选择版本。我们希望第一个下拉列表能够动态地从数据库中更新，并且根据第一个下拉列表的选择，自动更新第二个下拉列表的内容。对于这个问题，我们目前面临一些技术挑战:
-
数据库连接: 如何连接到应用程序的数据库，检索和显示数据？
-
动态更新: 如何根据第一个下拉列表的选择，动态刷新第二个下拉列表的内容？
-
数据交换: 如何在前端 JavaScript 和后端 Python 脚本之间传递数据？
-
代码实现: 如何编写必要的代码来实现动态下拉列表功能？
- 解决方案:
经过调查和学习，我们找到了一个合理的解决方案，如下:
-
首先，通过 webapp.RequestHandler 类创建 MainPage 类，并定义 get() 和 post() 方法。
-
其次，在 get() 方法中，查询数据库获取应用程序名称并将其存储在 appnames 变量中。
-
再者，在同一方法中，根据从第一个下拉列表中获取的应用程序名称，查询数据库获取该应用程序的版本并将其存储在 vernums 变量中。
-
随后，将 appnames 和 vernums 作为值传递给 HTML 模板 index.html 进行渲染。
-
此外，我们在 index.html 中使用 JavaScript 函数 myFunction() 来监听第一个下拉列表的更改，并根据选定的应用程序名称，重新提交表单以刷新第二个下拉列表的内容。
-
最后，在 post() 方法中，从请求中获取应用程序名称和版本号，并查询数据库获取相应的数据，然后将这些数据作为值传递给 HTML 模板 response.html 进行渲染。
我们最终实现了动态下拉列表功能，可以在页面上动态更新第二个下拉列表的内容，从而提高用户的操作体验和页面交互的灵活性。
代码示例:
class MainPage(webapp.RequestHandler):
def get(self):
proj = db.GqlQuery("SELECT DISTINCT Applicationname FROM Dashboard")
Appname1 = self.request.get('selvalue.value')
proj1 = Dashboard.all().filter('Applicationname =',Appname1)
values = {'appnames' : proj, 'vernums' : proj1}
self.response.out.write(template.render('index.html',values))
class Dashboard(db.Model):
Applicationname = db.StringProperty(required=True)
Version=db.StringProperty(required=True)
Type=db.StringProperty()
Pagename=db.StringProperty(required=True)
Responsetime=db.StringProperty(required=True)
class DisplayHandler(webapp.RequestHandler):
def post(self):
Appname=self.request.get('Applicationname')
Vernum=self.request.get('Version')
query = Dashboard.all().filter('Applicationname =',Appname).filter('Version =',Vernum)
values = {'query' : query}
self.response.out.write(template.render('response.html',values))
def main():
application = webapp.WSGIApplication(
[('/', MainPage),
('/Display', DisplayHandler)
],
debug=True)
run_wsgi_app(application)
if __name__ == "__main__":
main()
<html>
<head>
<title> My First Web Page </title>
<link rel="stylesheet" type="text/css" href="style.css"> </link>
<script type="text/javascript">
function myFunction(Applicationname)
{
var selvalue = document.getElementById("Applicationname");
}
</script>
</head>
<body>
<form action="/Display" method="post">
<select name="Applicationname" id="Applicationname" onchange="myFunction()" >
<option value="Select">---Select---</option>
{% for q in appnames %}
<option value="{{q.Applicationname}}">{{q.Applicationname}}</option>
{% endfor %}
</select>
<br><br>
Select the Version number
<select name="Version" id="Version">
<option value="Select">---Select---</option>
{% for r in vernums %}
<option value="{{q.Version}}">{{r.Version}}</option>
{% endfor %}
</select>
<input type="submit" value="Submit" align="center"/>
</form>
我们希望这篇技术文章对您有所帮助，如果您遇到类似的问题或对本文中的技术有更多疑问，欢迎随时提出。
