如何在html文件中使用jquery检索到的元素的属性值？

Question

我正在开发一个 bootstrap/flask 网站，该网站将显示帖子。我在每个帖子上都有一个下拉菜单。我需要一种方法来使用 jquery 检索单击的帖子的 ID（post.id），并将其发送到服务器端，以便可以将其保存在数据库中。 第一个问题，我认为我的 jquery 脚本不正确，其次我不知道如何将其发送到服务器端（site.py）。

我只附加了我的应用程序中的一些示例，因为它很长而且很乱。

更新： 我已经使用下面 Diptox 提供的脚本更新了脚本。但它仍然保存 post-id = 1 的评论，即使我在评论其他帖子。

index.html - 按钮示例

`<button class="btn btn-default dropdown-toogle" aria-expanded="false" id="menu1" p-id= "{{post.id}}" data-toggle="dropdown" type="button">
     <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu">

         <li>
              <a name="comment" class="bound" data-toggle="modal"  href="#" data-target="#modal_comment" >
                   <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                                                    Comment
              </a>
         </li>




         <li role="presentation">
             <a role="menuitem" tabindex="-1" href="{{ url_for('DeleteIndexedPost', id=post.id) }}">{{ ('Delete') }}</a></li>



         <li role="presentation">
             <a role="menuitem" tabindex="-1" href="{{ url_for('MoveToArchive', id=post.id) }}">{{ ('Move to Archive') }} </a></li>
     </ul>

index.html - 模式和脚本示例

      <div class="modal fade" id = "modal_comment" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" >
        <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

                        <h4 class="modal-title" id="exampleModalLabel">Comment</h4>

                    </div>
                    <div class="modal-body">

                            <div class="container-fluid">
                                <form action="{{ url_for('comment', id=post.id) }}" role="form" method ="POST">

                                    <input type="text" class="form-control" placeholder="Comment" name="comment" value="">

                                    <input type="text" class="form-control" placeholder="ID" name="ID" value="">

                                    <input class="btn btn-primary" type="submit" value="Submit">
                                </form>                                        
                            </div>
                    </div>
                </div>                                           
        </div>
    </div>

    <script type="text/javascript">

       $(document).ready( function() 
       {
          $('#menu1').click(function() 
          {
            var postid = $(this).attr("p-id");
            $.post("/index/comment/<int:id>",{ postid: postid });
        });
    });
    </script

site.py -sample

@app.route('/index/comment/<int:id>', methods=['GET','POST'])
def comment(id):





  if request.method == 'POST':
    new_comment = Comment()    
    new_comment.content= (request.form['comment'])
    new_comment.workID= (request.form['ID'])
    new_comment.post = id #This id is wrong (it defaults to 1 every time)

    session.add(new_comment) 
    session.commit()

    return redirect(url_for('index'))
return redirect(url_for('index'))

db.py -sample

class InfoPost (Base):
   __tablename__ = 'Infopost'
   id = Column(Integer, primary_key=True)
   workerID = Column(String)
   title = Column(String)
   message = Column(String)
   time = Column(DateTime)
   comment = relation('Comment', backref='comment')
   arkiv = Column(Boolean)



class Comment(Base):
   __tablename__ = 'comment'
   id = Column(Integer, primary_key=True)
   workID = Column(String)
   content = Column(String)
   post = Column(Integer, ForeignKey('Infopost.id'))

Answer 1

这是正确的 Jquery

$(document).ready( function() 
{
    $('#menu1').click(function() 
    {
        var postid = $(this).attr("p-id");
        $.post("/index/comment/<int:id>",{ postid: postid });
    });
});