有很多按钮和数据库更新的瓶子

我正在尝试制作一个网络应用程序，就像一个微型推文。帖子从数据库中提取出来，我想为每个帖子设置一个“投票”按钮，如下图所示。有很多按钮和数据库更新的瓶子

每个帖子都有一个id，author，body和likes财产。当点击投票表决时，likes属性需要更新。

我的问题是如何确定哪个按钮被点击。在这种情况下，对于route()函数和html模板，什么是一个好的策略？

我正在考虑为每个按钮添加一个名称，并在名称中加上post.id，然后检查是否有request。但帖子的数量在手前不得而知，应该怎么写request检查route()函数？

我现在的模板是如下

<table class="table table-striped"> 
{% for post in posts %} 
<tr> 
<td> {{ post.id }} </td>             
<td> <img src="{{ post.author.avatar(50) }}"> </td>       
<td> <b>{{ post.body }}</b> </td>                        
<td> <button type="button" name='{{'up.'+ post.id|string}}' class="btn btn-default"> 
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 
</button> 
{{ post.likes}} </td> 
</tr> 
{% endfor %} 
</table>

和当前route()是这样

@bbs.route('/', methods=['GET', 'POST'])         
def index():                
    posts = Post.query.all()            
    return render_template('bbs/index.html', posts=posts)

来源

2016-09-29 nos

一个干净的方式做到这一点是添加一个数据属性，在你button标签和每个upvote/downvote做一个ajax请求。

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

在你的情况下，它会被称为data-id。

在JavaScript

然后，单击该按钮时，得到这个数据的属性值，并且手艺您的网址为这样：

/upvote/<data-id>

，并使用AJAX GET请求调用它（这样的页面不刷新）。

现在在烧瓶侧得到ID为这样：

@app.route('/upvote/<post_id>') 
def upvote(post_id): 
    print('%s upvoted' % post_id) 
    # do your db update here and return a json encoded object

，然后在JavaScript方面再次，当你从瓶中你的答案，相应地更新您的按钮。

假设你把其他类在给予好评按钮例如：upvote_button你使用jQuery，您的JavaScript可能看起来像：

<script type='text/javascript'> 
$('.upvote_button').click(function(ev){ 
    var id = $(ev.currentTarget).attr('data-id'); 
    $.get("/upvote/" + id, function(data) { 
     // change your button here, and remove its upvote_button class 
     alert(data); 
    }); 
}); 
</script>

来源

2016-09-29 04:58:05

感谢您的答复。由于缺乏JavaScript知识，我仍然在为此苦苦挣扎。在我的'upvote'路由函数中，我'返回json.dumps（{'likes'：post.likes}）''。在JavaScript中，'alert（data）'似乎显示正确的字典，但是当我使用'data.likes'时，它给出了'undefined'。我做错了什么？ – nos

尝试：'data ['likes']' –

有很多按钮和数据库更新的瓶子

回答

相关问题