js获取到后端数据后为什么写入只有一行

如图我已经获取了数据了,但是在遍历的时候为什么只出来一行记录?明明有九行

img


前端代码

<%--
  Created by IntelliJ IDEA.
    Date: 2023/8/14
  Time: 12:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>评论区</title>
</head>
<body>
        ID:<input type="text" name="id" id="id"/><br><br>
        评论:<textarea name="comment" id="words" required></textarea><br><br>
        <button onclick="setDate()">发表评论</button><br><br>
        ID:<input type="text" id="commentID" placeholder="请在此输入要获取的ID值">
        <button onclick="getComments()">获取评论</button>
        <div id="comments"></div>
</body>
<script type="text/javascript">
    function setDate() {
        const time = new Date();
        const data = {
            id : document.getElementById("id").value,
            comment : document.getElementById("words").value,
            time : time.toLocaleDateString()
        }
        var xhr =new XMLHttpRequest()
        xhr.open("POST","/addComment",true)
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function () {
            if(xhr.status === 200  && xhr.readyState === 4){
                console.log("请求发送成功,服务器端口响应全部数据!")
            }
        }
        xhr.send(JSON.stringify(data));
        xhr.timeout = 2000
        xhr.timeout =function () {
            alert("超时!")
        }
        xhr.onerror =function () {
            alert("网络异常!")
        }
    }
    getComments()
    function getComments() {
        const  comments = document.getElementById("comments")
        comments.value = ''
        const  commentID =document.getElementById("commentID").value
        const xhr = new XMLHttpRequest();
        xhr.open("GET","/getComment?id="+commentID,true);
        xhr.onreadystatechange = function (){
            if (xhr.status === 200 && xhr.readyState ===4){
                let data =JSON.parse(xhr.responseText)
                console.log(data)
                for(var i =0 ; i<data.length ; i++){
                    comments.innerHTML = data[i].id+data[i].comment+data[i].time+"<br/>"
                }
            }
        }
        xhr.send()
        xhr.timeout = 2000
        xhr.timeout =function () {
            alert("超时!")
        }
        xhr.onerror =function () {
            alert("网络异常!")
        }
    }
</script>
</html>

你在循环里面重复赋值了，当然只会保存最后一条数据的值啊，用+=吧，并且在循环前重置下。

comments.innerHTML = ""
for(var i =0 ; i<data.length ; i++){
                    comments.innerHTML += data[i].id+data[i].comment+data[i].time+"<br/>"
                }

【以下回答由 GPT 生成】

问题是在JavaScript代码中遍历数据时只显示了一行记录，如何解决这个问题。

首先检查JavaScript代码，看是否正确处理了从后端获取的数据。确认是否使用了循环来遍历数据，并将每一行记录添加到HTML页面中的指定位置。

以下是一个示例的解决方案：

<script type="text/javascript">
    function getComments() {
        // 获取输入的ID值
        var commentID = document.getElementById("commentID").value;

        // 创建一个XMLHttpRequest对象
        var xhr = new XMLHttpRequest();

        // 设置请求的URL
        var url = "/api/comments/" + commentID; // 假设后端API的URL是/api/comments/{commentID}

        // 发送GET请求
        xhr.open("GET", url, true);
        xhr.send();

        // 监听请求的状态改变事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 获取后端返回的数据
                var response = JSON.parse(xhr.responseText);

                // 清空之前的评论
                var commentsDiv = document.getElementById("comments");
                commentsDiv.innerHTML = "";

                // 遍历获取到的评论数据
                for (var i = 0; i < response.length; i++) {
                    // 创建一个新的评论元素
                    var commentElement = document.createElement("p");

                    // 设置评论的文本内容
                    commentElement.innerText = response[i].comment;

                    // 将评论添加到页面中
                    commentsDiv.appendChild(commentElement);
                }
            }
        }
    }
</script>

这个解决方案假设后端API的URL是"/api/comments/{commentID}"，可以根据实际情况进行修改。在获取到后端返回的数据后，通过循环遍历数据，创建新的评论元素，并将其添加到HTML页面的指定位置。

请注意，此解决方案是基于以上提供的HTML代码和问题描述给出的。如果有其他细节或代码不同，可能需要对解决方案进行调整。如果无法确定问题的具体原因，请提供更多相关的代码和详细信息。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^