Question

我正在为我的网页中的评论添加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替换页面上“target”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会在成功提交后执行。 Javascript在浏览器中调用$.web2py.component()，通过使用“user”作为URL arg调用news_list()函数来重新加载“news”div中的新闻列表组件（“user”arg是一个标志告诉news_list()函数只返回当前用户的帖子。）

Answer 2

将相同的css应用于您的Ajax响应以获取相同的视图

这个css在ajax响应中缺失。

查看此示例

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

web2py中的ajax响应

2 个答案: