JS：HTML不是动态变化的

Question

我正在构建一个网站，允许用户在单击按钮时喜欢帖子。CreateLike函数调用API并创建一个like对象，但是，我希望立即更新喜欢的数量而不重新加载。我构建了另一个 API，它返回帖子的喜欢数。函数 LikeCount 应该将喜欢的数量放入 p 标记中。当我加载页面时，它最初可以工作，但是，当我单击按钮时，即使我可以看到API被调用，该值也不会更改。（重新加载页面后，数字会按预期更改）我做错了什么？

我有这个HTML：

<p class="like-count" id={{post.id}}></p>

<script>LikeCount({{post.id}});</script>

<button type="button" class="btn-like" onclick="CreateLike({{user.id}},{{post.id}})"></button>

使用 JS 函数：

            function CreateLike (userid,postid) {

                xhr = new XMLHttpRequest();

                var url = "{% url 'likes' %}";

                var csrftoken = getCookie('csrftoken')

                xhr.open("POST", url, true);

                xhr.setRequestHeader("X-CSRFToken",'{{ csrf_token }}')

                xhr.setRequestHeader("Content-type", "application/json");

                xhr.onreadystatechange = function () { 

                    if (xhr.readyState == 4 && xhr.status == 200) {

                        var json = JSON.parse(xhr.responseText);

                        console.log(json.email + ", " + json.name)

                    }

                }

                var data = JSON.stringify({csrfmiddlewaretoken:csrftoken,"user":userid,"post":postid});

                xhr.send(data);

                LikeCount(postid);

            }

            function LikeCount(postid) {

                var xmlhttp = new XMLHttpRequest();

                var url = "{% url 'likecount' id=112233 %}".replace("112233", postid);

                xmlhttp.onreadystatechange = function() {

                    if (this.readyState == 4 && this.status == 200) {

                    var myArr = JSON.parse(this.responseText);

                    myFunction(myArr);

                    }

                };

                xmlhttp.open("GET", url, true);

                xmlhttp.send();

                function myFunction(arr) {

                    var out = arr.like_count;

                    document.getElementById(postid).innerHTML = out;

                }

            }

像计数 API 看起来像这样：

{

    "like_count": 1

}

Answer 1

添加xhr.onreadystatechange = function() {&nbsp; &nbsp; if (this.readyState == 4 && this.status == 201) {&nbsp; &nbsp; var myArr = JSON.parse(this.responseText);&nbsp; &nbsp; LikeCount(myArr.post);&nbsp; &nbsp; }};以前xhr.send(data);&nbsp;它解决了这个问题。

Answer 2

if(xhr.readyState === XMLHttpRequest.DONE) {&nbsp; &nbsp; var status = xhr.status;&nbsp; &nbsp; if (status === 0 || (status >= 200 && status < 400)) {&nbsp; &nbsp; &nbsp;LikeCount(); //Put your get like count here&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // Handle Errors&nbsp; &nbsp; }&nbsp; }仅在收到您的请求响应后调用。现在，您将立即发送请求，而无需确保上一个请求是否已完成。LikeCountPOSTGETPOST