汪的爱琪 2023-08-15 18:43 采纳率: 67.5%
浏览 4
已结题

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>



  • 写回答

2条回答 默认 最新

  • qq_35031212 2023-08-15 23:04
    关注

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

    comments.innerHTML = ""
    for(var i =0 ; i<data.length ; i++){
                        comments.innerHTML += data[i].id+data[i].comment+data[i].time+"<br/>"
                    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月25日
  • 已采纳回答 8月17日
  • 创建了问题 8月15日

悬赏问题

  • ¥15 有人会用py或者r画这种图吗
  • ¥15 MOD04_3K图像预处理
  • ¥15 [VASP]关于超胞大小和k 点网格的收敛性测试
  • ¥15 pip下载paddle2onnx离谱错误
  • ¥60 db2move nlzxams import 导出db2备份数据报错
  • ¥15 关于#python#的问题:全文总结功能咨询
  • ¥15 俄罗斯方块中无法同时消除多个满行
  • ¥15 使用gojs3.0,如何在nodeDataArray设置好text的位置,再go.TextBlock alignment中进行相应的改变
  • ¥15 psfusion图像融合指标很低
  • ¥15 银河麒麟linux系统如何修改/etc/hosts权限为777