无法在 Javascript/AJAX 中使用 GetElementById 获取表数据 [重复]答案

【问题标题】：Can't get table data using GetElementById in Javascript/AJAX [duplicate]无法在 Javascript/AJAX 中使用 GetElementById 获取表数据 [重复]
【发布时间】：2017-05-06 15:28:38
【问题描述】：

这是我的 JavaScript 函数。

var ajaxRequest = new XMLHttpRequest;
ajaxRequest.open("GET", "crudops.aspx?StudentId="+id+"&StudentName="+name+"&operation=insert", false);
ajaxRequest.send(null);
document.getElementById("TableDiv").innerHTML = ajaxRequest.responseText;
var t = document.getElementById("TableDiv").innerHTML;
alert(t);
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = id;
cell2.innerHTML = name;

这是t里面的东西。

<table id="studenttable" cellpadding="5"><tbody><tr><th>Student Id</th><th>Student Name</th> ... </table>

但我无法使用

之类的方法将表格读入变量

var table = t.getElementbyId("studenttable");

如何读取该表并追加行？帮我提些建议。

【问题讨论】：

console.log(ajaxRequest.responseText); 会得到什么？
整个TableDivHTML代码@caramba
var row = table.insertRow(0); table 是什么？你只有t，没有table 人。 innerHTML 也返回一个字符串！！
先阅读 this 然后 this 然后 this 我会坚持使用第二个链接。我认为这是最简单易用的。
ajax 是asynchronous - 不保证响应在请求发送后立即到达，但您的代码正在尝试以同步方式使用响应。使用回调函数处理响应并操作 DOM

标签： javascript html ajax

【解决方案1】：

var t = document.getElementById("TableDiv").innerHTML;
var table = t.getElementById("studenttable");

t 变量应该是一个元素，而不是一个字符串。尝试删除.innerHTML;。

【讨论】：

【解决方案2】：

由于异步请求的性质，您需要分配一个回调函数来处理响应数据，而不是期望立即得到响应

var xhr = new XMLHttpRequest;
xhr.onreadystatechane=function(){
    if( xhr.readyState==4 && xhr.status==200 ){

        document.getElementById("TableDiv").innerHTML = xhr.response;
        var t = document.getElementById("TableDiv").innerHTML;
        alert(t);

        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);

        cell1.innerHTML = id;
        cell2.innerHTML = name;     

    }
};
xhr.open( "GET", "crudops.aspx?StudentId="+id+"&StudentName="+name+"&operation=insert", true );
xhr.send(null);

【讨论】：

我没有注意到 false 用于同步标志

【解决方案3】：

将 XHR async 设置为 true（也可以省略）
使用onreadystatechange 回调
不要通过innerHTML 引用 DOM 元素，而是使用 DOM 节点元素对象

jsBin live demo

var id = "123",
    name = "This Is A Name";


var XHR = new XMLHttpRequest(),
    method = "GET",
    url = "crudops.aspx?StudentId="+id+"&StudentName="+name+"&operation=insert";

XHR.open(method, url, true); // << or omit async (anyway defaults to true)

XHR.onreadystatechange = function () {
  if(XHR.readyState === XMLHttpRequest.DONE && XHR.status === 200) {

    document.getElementById("TableDiv").innerHTML = XHR.responseText;

    // Use meaningful var names
    // var tableWrapper = document.getElementById("TableDiv").innerHTML;

    // BTW since at this point your table is (hopefully) in the DOM
    // you can go get it directly
    var table = document.getElementById("studenttable");

    if(!table) return; // Do nothing if no such Element in DOM

    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = id;
    cell2.innerHTML = name;

  }
};

XHR.send();

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open

【讨论】：

【解决方案4】：

字母“d”需要大写。

var table = t.getElementById("studenttable");

【讨论】：