web2py中的ajax响应

Question

我正在为我的网页中的 cmets 添加 ajax。 以下是函数和视图文件

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()，它通过调用news_list() 函数重新加载“新闻”div 中的新闻列表组件，其中“user”作为URL arg（“user”arg 是一个标志，告诉@ 987654327@函数只返回当前用户的帖子）。

Answer 2

对你的 Ajax 响应应用相同的 css 以获得相同的视图

ajax 响应中缺少此 css。

查看此示例

$.ajax({
  url: "test.html",
  cache: false
})
 .done(function( result) {
 $( "#results" ).append( result); // or replace your "result" coming from server
});