我有一个应用程序(在python中开发),每5秒钟需要从数据存储区刷新一次视图。我已经推出了一个javascript函数,并使用ajax处理刷新。
Ajax功能
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript"> var refreshId = setInterval(function() { $('#responsecontainer').fadeOut("slow").load('/refresh').fadeIn("slow"); }, 5000); </script>
之后,我有一组div标签(responsecontainer),它包含从服务器端返回的参数以供显示。
<div id="responsecontainer">
{% for greeting in greetings %}
{% if greeting.author %}
<b>{{ greeting.author.nickname }}</b> wrote:
<a href="/sign?key={{ greeting.key.id }}&auth={{ greeting.author.nickname }}">Delete</a>
{% else %}
An anonymous person wrote:
{% endif %}
<blockquote>{{ greeting.content|escape }}</blockquote>
{% endfor %}
</div>
<form action="/sign" method="post">
<div><textarea name="content" rows="3" cols="60"></textarea></div>
<div><input type="submit" value="Sign Guestbook" name="submitGuestBk"></div>
</form>
我的服务器端代码是查询数据存储区并将结果呈现给模板文件(index.html)。
class RefreshPage(webapp.RequestHandler):
def get(self):
greetings_query = Greeting.all().order('-date')
greetings = greetings_query.fetch(10)
if users.get_current_user():
url = users.create_logout_url(self.request.uri)
url_linktext = 'Logout'
else:
url = users.create_login_url(self.request.uri)
url_linktext = 'Login'
template_values = {
'greetings': greetings,
'url': url,
'url_linktext': url_linktext,
}
path = os.path.join(os.path.dirname(__file__), 'index.html')
self.response.out.write(template.render(path, {}))
但是,当我运行应用程序时,结果与表单和表格等html内容一起刷新。在index.html每隔5秒刷新一次后,我会看到两个表单。
有人可以指导我可能的原因和解决方案吗?
答案 0 :(得分:8)
对load('/refresh')
的调用会用加载的HTML替换responsecontainer
div的内容。
因此,您需要RefreshPage
处理程序才能返回该HTML,而不是整个页面。例如,它应该使用一个只包含这个的模板:
{% for greeting in greetings %}
{% if greeting.author %}
<b>{{ greeting.author.nickname }}</b> wrote:
<a href="/sign?key={{ greeting.key.id }}&auth={{ greeting.author.nickname }}">Delete</a>
{% else %}
An anonymous person wrote:
{% endif %}
<blockquote>{{ greeting.content|escape }}</blockquote>
{% endfor %}
为避免在两个模板中复制该内容,您可能会使主模板在div中包含此子模板,例如:
<div id="responsecontainer">
{% include "sub_template.html" %}
</div>
<form action="/sign" method="post">
<div><textarea name="content" rows="3" cols="60"></textarea></div>
<div><input type="submit" value="Sign Guestbook" name="submitGuestBk"></div>
</form>