1.需求：實現點贊點滅，同一使用者對一篇文章不可重複點贊和點滅，要求把數量顯示出來
2.方法：建兩張表（一張也可以），分別儲存點讚的文章id+使用者，點滅的文章id+使用者名稱
3.使用非同步的方法減少伺服器負載
4.見程式碼
5.jquery平時不怎麼用，用起來確實方便
6.需要學習：mysql db.session.add等操作 ajax的使用方法，jquery元素選擇器，變數的選擇（長見識） python部分對傳進來的資料進行處理

js部分(post方法）

/**
 * Created by Mr.Bean on 2018/2/21.
 */
var data = {
    "flag"
 
: "False",
    "mz":"zan",
    "num": 0,
};
$(document).ready(function(){
    $("#submit").addClass("btn btn-info");
    $("span").unbind('click').bind('click',function () {
        var article_id =$(this).attr("id");
        var another = $(this).attr("value");
        if(typeof(another)==="undefined"
 
){
            data.flag="True";
            data.num = article_id;
            data.mz="zan";
            $.ajax({
                type: "POST",
                url: "/comment?t="+Math.random()   ,
                cache: false,
                data: JSON.stringify(data),
                contentType:'application/json;charset=UTF-8'
 
,
                dataType:'json',
                async: true,
                success:function(data){
                    if(data.alert=="success"){
                        $("[id="+article_id+"]").html("贊"+ data.result);
                    }
                    else if(data.alert=="failed") alert("你已經點過讚了");
                },
                error:function (xhr,type) {
                }
            });
        }
        else{
            data.flag="True";
            data.num = another;
            data.mz="mie";
            $.ajax({
                type: "POST",
                url: "/comment?t="+Math.random()    ,
                data: JSON.stringify(data),
                contentType:'application/json;charset=UTF-8',
                dataType:'json',
                success:function(data){
                    if(data.alert=="success"){
                        $("[value="+another+"]").html("滅-"+ data.result);
                    }
                    else if(data.alert=="failed") alert("你已經點滅過了");
                },
                error:function (xhr,type) {
                }
            })
        }
    });
});

html部分

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block page_content %}
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="{{url_for('static', filename = 'ajax.js')}}"></script>
<style>
    i {
        font-style: normal;
        font-size: 12px;
    }
    .ys {
        color: #3a6fb9;
    }
</style>
<div>
    {{wtf.quick_form(form)}}
</div>
<div style="margin-top: 10px">
    <span class="glyphicon glyphicon-heart-empty" style="font-weight: bold">&nbsp;評論區</span>
</div>
<ul class="posts">
    {% for post in posts %}
    <li class="post">
        <div class="post-body">
            <span class="glyphicon glyphicon-hand-right" aria-hidden="true">
            {{post.article}}
            </span>
        </div>
        <div>
            <span style="float:left">
                <i class="ys">{{ post.name}}</i>　
                <i style="color: #A8A7BE">{{ post.timestamp}}</i>
            </span>
            <span style="background-color: #434F77;float: right"  class="badge badge-info" value="{{post.id}}">  滅-{{post.mie}} </span>
            <span style="background-color: #0079D7;float: right"  class="badge badge-info" id="{{post.id}}">  贊{{post.zan}} </span>
        </div>
        <hr>
    </li>
    {% endfor %}
</ul>
{% endblock %}

views.py

@main.route('/comment', methods=['GET', 'POST'])
@login_required
def comment():
    form = PostForm()
    data = request.get_json()
    if data is not None:
        emm = data.get('mz')
        a = data.get('num')
        if a is not None:
            num = int(a)
            if emm == "zan":
                flag = data.get('flag')

                number = Zan.query.filter_by(article_id=num).count()
                if flag == 'True':
                    name = Zan.query.filter_by(article_id=num, name=session.get('name')).first()
                    if name is None:
                        new = Zan(article_id=num, name=session.get('name'))
                        db.session.add(new)
                        number += 1
                        user = Post.query.filter_by(id=num).first()
                        user.zan = number
                        db.session.add(user)
                        db.session.commit()
                        return jsonify({'result': number, 'alert': 'success'})
                    else:
                        return jsonify({'result': number, 'alert': 'failed'})
            elif emm == "mie":
                flag = data.get('flag')
                number = Mie.query.filter_by(article_id=num).count()
                if flag == 'True':
                    name = Mie.query.filter_by(article_id=num, name=session.get('name')).first()
                    if name is None:
                        new = Mie(article_id=num, name=session.get('name'))
                        db.session.add(new)
                        number += 1
                        user = Post.query.filter_by(id=num).first()
                        user.mie = number
                        db.session.add(user)
                        db.session.commit()
                        return jsonify({'result': number, 'alert': 'success'})
                    else:
                        return jsonify({'result': number, 'alert': 'failed'})
    elif form.validate_on_submit():
        post = Post(title=form.title.data, name=form.name.data, article=form.text.data, timestamp=datetime.utcnow(),
                    zan=0)
        post.zan = 0
        db.session.add(post)
        db.session.commit()
        return redirect(url_for('main.comment'))
    posts = Post.query.order_by(Post.timestamp.desc()).all()
    return render_template('main/comment.html', form=form, posts=posts)

效果圖：

有些程式碼是可以精簡的，我這裡嫌麻煩懶得刪了，可以對照著自己的需求改！