如何使用 AJAX 成功函数更新动态创建的号码？答案

【问题标题】：How do I update a dynamically created number with an AJAX success function?如何使用 AJAX 成功函数更新动态创建的号码？
【发布时间】：2018-09-26 01:02:35
【问题描述】：

我正在创建一个带有 mongo 后端的投票系统，并且我试图弄清楚如何在投票后更新前端的数字。现在，数字正在使用车把动态显示。在 .up 点击 ajax 完成它的事情并将数据发送到服务器，然后返回 gameData。基本上我希望我的 {{currentvote}} 号码在成功时更新。

$('.up').on('click', function() {
    var id = this.id;

    $.ajax({
        type: "POST",
        url: "/api/upvote",
        data: JSON.stringify({ cardId: id }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(gameData){
            console.log(gameData.currentvote + 1);

        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

<div class="col-lg-12">
    <div class="row">
    <div class="up" id="{{ID}}"><i class="fas fa-chevron-circle-up color-gray upvote"></i></div>
    <div class="down" id="{{ID}}"><i class="fas fa-chevron-circle-down color-gray downvote"></i></div>
    <div class="margin-left"><p class="vote-number" id="green">{{currentvote}}</p></div>
    </div>
</div>

【问题讨论】：

你试过$('#green').text(gameData.currentvote + 1)吗？
@YongQuan 这在多个层面上都行不通。
您能否更新您的 sn-p 以便我们获得更大的图景，以便我们知道它应该如何工作？

标签： javascript ajax mongodb

【解决方案1】：

当您在 jquery ajax 中执行此操作时，您也应该通过 jquery 完成它。您可以像这样轻松地做到这一点：

success: function(gameData){
    var currentVote = $(".vote-number").text();
    $(".vote-number").text( parseInt(currentVote) + parseInt(gameData.currentvote) + 1 );
}

【讨论】：

【解决方案2】：

普通的旧 JS 应该可以完成这项工作。

$('.up').on('click', function() {
var id = this.id;
var upVote = document.getElementById('green');
$.ajax({
       type: "POST",
       url: "/api/upvote",
       data: JSON.stringify({ cardId: id }),
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(gameData){
            console.log(gameData.currentvote + 1);
            upVote.innerText= parseInt(upVote.innerText) + 1;


        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

编辑：已更新以考虑 Brad 的评论。

【讨论】：

在这种情况下并不重要，但您应该设置元素的文本，而不是 HTML。稍后，这段代码很可能会被修改以用于其他用途，并且您会将可能无效的 HTML 注入到 HTML 应该存在的地方。