如何从数据库中实时更新上票和下票数而不需要重定向？

Question

我在图片库上设置了上票和下票按钮，用户可以进行投票，但问题是不能实时更新，我需要通过服务器刷新页面来更新mongodb数据库中的投票数。

投票分数不显示在前端，当用户点击它时，需要刷新页面以更新每次用户投票的结果。

按钮。

<div class="message__votes" Title= "<%=photo.Title%>" data-id="<%=photo._id%>">
    <button class="btn btn-default message__vote " id="upvote" type="button"><i class="fa fa-check"></i></button>
    <!-- <button class="message__vote" id="upvote"></button> -->
    <div class="vote__counter"><%=photo.voteScore%></div>
    <button class="btn btn-default message__vote" id="downvote" type="button"><i class="fa fa-upload"></i><span class="bold"></span></button>
</div>

这是我的ajax，从前端向服务器发送数据。我的前端发送ID，其他按钮通过ajaxx请求点击到快递服务器的发布路径。

我的ajax发布方法。

$('body').on('click', '#upvote', event => {
    const id = event.target.parentElement.getAttribute('data-id');

    upvoteMessage(id);
})

$('body').on('click', '#downvote', event => {
    const id = event.target.parentElement.getAttribute('data-id');

    downvoteMessage(id);      
})

function upvoteMessage(id) {
    $.ajax({
        url: '/' + id + '/upvote',
        type: 'patch',
        contentType: 'application/json',
        headers: {
            authorization: `Bearer ${window.localStorage.token}`
        }
    })
    .done(res => {
        STORE.update(res.photo);
        renderPhotos();
    })
}

function downvoteMessage(id) {
    $.ajax({
        url: '/' + id + '/downvote',
        type: 'patch',
        contentType: 'application/json',
        headers: {
            authorization: `Bearer ${window.localStorage.token}`
        }
    })
    .done(res => {
        STORE.update(res.photo);
        renderPhotos();
    })
}

这些路由是将数据存储在mongoose数据库中的post路由。这些路由将票数存储到照片集的voteScore计数变量中。

我在服务器上的路由。


exports.postUpvote= (req, res) => {

    PhotoEntries
        .findById(req.params.id)
        .then(photos => {
            const alreadyUpvoted = photos.upvoted.includes(req.user.id);
            if (alreadyUpvoted) {
                photos.voteScore--;
                photos.downvoted.push(req.user.id);
                photos.save()
                    .then(photos => {
                        return res.status(200).json({photos});
                    })
            }
            const alreadyDownvoted = photos.downvoted.includes(req.user.id);
            if (alreadyDownvoted) {
                let _downvoted = photos.downvoted.filter(id => id !== req.user.id);
                photos.downvoted = _downvoted;
            }
            photos.voteScore++;
            photos.upvoted.push(req.user.id);
            photos.save()
                .then(photos => {

                    res.send({voteScore:photos.voteScore});
                    res.redirect("/")
                })
        })
        .catch(err => {
            res.status(500).json({error: err});
        })
}

exports.postDownvote = (req, res) => {

    PhotoEntries
        .findById(req.params.id)
        .then(photos => {
            const alreadyDownvoted = photos.downvoted.includes(req.user.id);
            if (alreadyDownvoted) {
                return res.status(400).json({error: 'cannot vote the same way twice'});
            }
            const alreadyUpvoted = photos.upvoted.includes(req.user.id);
            if (alreadyUpvoted) {
                let _upvoted = photos.upvoted.filter(id => id !== req.user.id);
                photos.upvoted = _upvoted;
            }
            photos.voteScore--;
            photos.downvoted.push(req.user.id);
            photos.save()
                .then(photos => {
                    return res.status(200).json({photos});
                })
        })
        .catch(err => {
            res.status(500).json({error: err});
        })
}

当用户点击上票或下票按钮时，它会自动从数据库中更新分数，而无需刷新页面。我的上票和下票是附加在照片集合模式上的，每张照片都有自己的上票和下票。