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() {

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

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

    LikeCount(myArr.post);

    }

};

以前

xhr.send(data); 

它解决了这个问题。

Answer 2

if(xhr.readyState === XMLHttpRequest.DONE) {

    var status = xhr.status;

    if (status === 0 || (status >= 200 && status < 400)) {

     LikeCount(); //Put your get like count here

    } else {

      // Handle Errors

    }

  }

仅在收到您的请求响应后调用。现在，您将立即发送请求，而无需确保上一个请求是否已完成。LikeCountPOSTGETPOST