html页面出现undefined如何解决

先粘代码

<!DOCTYPE html>
<html>
<head>
  <title>System</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <script>
    function findAllStudent()
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                obj = JSON.parse(this.responseText);
                var str ="";
                for(i = 0; i < obj.length; i++){
                    str += "<tr><td>"+obj[i].ID+"</td><td>"+obj[i].name+"</td><td>"+obj[i].course+"</td><td>"+obj[i].grade+"</td></tr>";
                    };
                document.getElementById("mesContent").innerHTML = str;
            }
        };
        xmlhttp.open("GET", "/admin/getAllStudent.do", true);
        xmlhttp.send();
    }
    </script>
</head>
    <style type="text/css">
        .left-side{ float:left;width:20%;height:165px;border:2px solid black} 
        .content-side{ float:left;width:76%;height:500px;border:2px solid black;margin-left: 4px;} 
        .form-control{width: 180px}
        .nav-item{width:100%}
    </style>
<body>

<div class="container-fluid">

    <div class="left-side">
        <!-- Nav pills -->
      <ul class="nav nav-pills" role="tablist" style="background-color:#99CCFF">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="pill" href="#read">浏览</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#create">创建</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#update">更新</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#delete">删除</a>
        </li>
      </ul>
    </div>

    <div class="content-side" style="background-color:#99CCFF">
        <!-- Tab panes -->
      <div class="tab-content">

      <div id="read" class="container-fluid tab-pane active"><br>
          <h3>浏览</h3>
          <div >
            <table class="table table-bordered" style="background-color:#FFFFFF">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>name</th>
                    <th>course</th>
                    <th>grade</th>
                  </tr>
                </thead>
                <tbody id="mesContent">
                </tbody>
            </table>
          </div>
          <button type="button" onclick="findAllStudent()" class="btn btn-primary">request</button>
        </div>

        <div id="create" class="container-fluid tab-pane fade"><br>
          <h3>创建</h3>
          <form action="/admin/addStudent.do" method="post">
              <div class="form-group">
                <label for="ID">ID:</label>
                <input type="text" class="form-control" id="ID" name="ID" value ="123">
              </div>
              <div class="form-group">
                <label for="name">name:</label>
                <input type="text" class="form-control" id="name" name="name" value ="123">
              </div>
              <div class="form-group">
                <label for="course">course:</label>
                <input type="text" class="form-control" id="course" name="course" value ="123">
              </div>
              <div class="form-group">
                <label for="grade">grade:</label>
                <input type="text" class="form-control" id="grade" name="grade" value ="123">
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>

        <div id="update" class="container-fluid tab-pane fade"><br>
          <h3>更新</h3>
          <form action="/admin/updateStudent.do" method="post">
              <div class="form-group">
                <label for="ID">ID: (this ID must exist in database)</label>
                <input type="text" class="form-control" id="ID" name="ID" value ="123">
              </div>
              <div class="form-group">
                <label for="name">name:</label>
                <input type="text" class="form-control" id="name" name="name" value ="456">
              </div>
              <div class="form-group">
                <label for="course">course:</label>
                <input type="text" class="form-control" id="course" name="course" value ="456">
              </div>
              <div class="form-group">
                <label for="grade">grade:</label>
                <input type="text" class="form-control" id="grade" name="grade" value ="456">
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>

        <div id="delete" class="container-fluid tab-pane fade"><br>
          <h3>删除</h3>
          <form action="/admin/deleteStudent.do" method="post">
              <div class="form-group">
                <label for="ID">ID: (this ID must exist in database)</label>
                <input type="text" class="form-control" id="ID" name="ID" value ="123">
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>

      </div>
    </div>

</div>
</body>
</html>

图片说明
显示如图,求解求解啊!!!!!

2个回答

undefined 说明没有得到 JSON的数据值,先检查后台是否有该值,再确定前台应用 key 是否正确。

wojiushiwo945you
毕小宝 回复向大佬低头: 好眼力,还是你厉害找到了根源。我就是大概猜测下问题的地方,没有细致看过他的代码。
大约一年之前 回复
weixin_43731733
一小步教父 已经解决了,还是十分感谢!!!
大约一年之前 回复
qq_23126581
渊渟无迹静涛君 他这里明显得到了数据。就id没数据。所有怀疑不是ID 而是小写id
大约一年之前 回复

你能先把代码格式化下吗,这个怎么看。undefined 就是未定义 好比你页面没有var str; 然后你页面使用str就会是undefined。

              obj = JSON.parse(this.responseText);     //确定下obj里有ID这个吗?
                var str ="";
                for(i = 0; i < obj.length; i++){
                    str += "<tr><td>"+obj[i].ID+"</td><td>"+obj[i].name+"</td><td>"+obj[i].course+"</td><td>"+obj[i].grade+"</td></tr>";
                    };
                document.getElementById("mesContent").innerHTML = str;

                                //obj[i].ID   这个里面有没有ID?或者说是小写的id ?
qq_23126581
渊渟无迹静涛君 回复菠萝屋: 采纳下把,谢谢
大约一年之前 回复
weixin_43731733
一小步教父 已经解决了,确实是小写的id,十分感谢,向大佬低头
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐