python - web2py 中的 ajax 响应

Question

我正在努力将 ajax 添加到我的网页中的评论中。以下是函数和 View 文件

def normalajax():
    news=db(db.newsfeed.id>0).select(orderby=~db.newsfeed.created_on)
    return dict(news=news)

def new_post():
    form=SQLFORM(db.newsfeed)
    if form.accepts(request.vars, formname=None):
        news=db(db.newsfeed.created_by==auth.user_id).select(orderby=~db.newsfeed.created_on)
        return DIV(news)
    elif form.errors:
        return TABLE(*[TR(k, v) for k, v in form.errors.items()]) 


{{extend 'layout.html'}}

<form id="myform">
  <input name="body" id="body" />
  <input type="submit" />
</form>
 <script>$('textarea').css('width','600px').css('height','50px');</script>

<script>
jQuery('#myform').submit(function() {
  ajax('{{=URL('new_post')}}',
       ['body'], 'target');
  return false;
});

</script> 

<div id="target">
 {{for post in news:}}
 <div style="background: #ffffff; margin-bottom: 5px; padding: 8px;">
 <h3>{{=db.auth_users[post.created_by].first_name}}</h3> On {{=post.created_on}}:
  {{=MARKMIN(post.body)}}

 </div>    
 {{pass}}

</div>

问题是，当我发布新评论时，整个 div 都会被新内容替换，而没有我在 for 循环中给出的所有样式

我已经给出了截图的链接:这是发表评论之前: https://skydrive.live.com/redir?resid=AFF5DF0EB4A5BCD5!122&authkey=!AFg6utSsGLyYRG4&v=3&ithint=photo%2c.png

这是发表评论后的: https://skydrive.live.com/redir?resid=AFF5DF0EB4A5BCD5!123&authkey=!AJyroKLQLp5ssPs&v=3&ithint=photo%2c.png

发布评论后，ajax响应替换了div目标的内容，我如何访问响应并像发布前显示的那样显示它......

Answer 1

页面进入浏览器后，您无法在其上执行 Python 代码。一旦页面进入浏览器，原始模板中的 Python 代码就不存在了——所有代码都已被执行以生成纯 HTML 源代码。当您提交表单时，new_post 函数返回 DIV(news)，它会转换为 HTML。该 HTML 替换了页面上“目标”div 的内容。当您生成 Ajax 响应时，您必须在服务器上生成最终的 HTML 并将其发送到浏览器 - 浏览器不进行任何模板处理。

无论如何，更好的方法可能是使用 Ajax 组件。未经测试，但类似:

def news():
    return dict()

def news_list():
    if request.args(0) == 'user':
        query = db.newsfeed.created_by == auth.user_id
    else:
        query = db.newsfeed.id > 0
    news = db(query).select(orderby=~db.newsfeed.created_on)
    return dict(news=news)

def new_post():
    form = SQLFORM(db.newsfeed)
    if form.process().accepted:
        url = URL('default', 'news_list.load', args='user')
        response.js = "$.web2py.component('%s', target='news');" % url
    return dict(form=form)

In /views/default/news.html:

{{extend 'layout.html'}}
{{=LOAD('default', 'new_post.load', ajax=True)}}
{{=LOAD('default', 'news_list.load', ajax=True, target='news')}}

In /views/default/news_list.load:

{{for post in news:}}
 <div style="background: #ffffff; margin-bottom: 5px; padding: 8px;">
 <h3>{{=post.created_by.first_name}}</h3> On {{=post.created_on}}:
  {{=MARKMIN(post.body)}}
{{pass}}

In /views/default/new_post.load:

{{=form}}

在上面的代码中，news.html 是主页，它包含两个 Ajax 组件——一个用于表单，一个用于新闻列表。最初，新闻列表组件加载所有新闻帖子(如果帖子很多，您可能会考虑对其进行限制或分页)。提交表单时，它会通过 response.js 返回一些 Javascript，并在成功提交后执行。 Javascript 在浏览器中调用 $.web2py.component()，通过使用“user”调用 news_list() 函数，重新加载“news”div 中的新闻列表组件。 ”作为 URL arg(“user”arg 是一个标志，告诉 news_list() 函数仅返回当前用户的帖子)。