我有一个HTML表，我正在尝试使用存储在外部JSON文件中的数据填充。我正在尝试使用纯JavaScript（没有JS库）在其上发出AJAX请求，但是当我点击“Test”按钮时没有任何反应;数据不会填充。这是我的JSON文件：
{ "row":[
{
"ID" : "2",
"FirstName" : "John",
"LastName" : "Test",
"DOB": "03-12-1959",
"Gender":"M"
},
{
"ID" : "3",
"FirstName" : "Helen",
"LastName" : "Test",
"DOB": "03-12-1959",
"Gender":"M"
}
]
}
我的一些HTML代码：
<button onclick="loadJSON()">Test</button>
<table class="test-table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>DOB</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td><label for="row1"></label>123</td>
<td>John</td>
<td>Doe</td>
<td>02-15-1982</td>
<td>M</td>
</tr>
</tbody>
</table>
我的JavaScript代码：
function loadJSON(){
var data_file = "test.json";
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 ){
var jsonObj = JSON.parse(http_request.responseText);
var tr, td;
var tbody = document.getElementById("data");
// loop through data source
for (var i=0; i<jsonObj.row.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsonObj.row[i].ID;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsonObj.row[i].FirstName;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsonObj.row[i].LastName;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsonObj.row[i].DOB;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsonObj.row[i].Gender;
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
我在哪里出错了，我该怎么做才能解决这个问题？任何帮助将不胜感激。
答案 0 :(得分：0)
你在} ...之前的功能中错过了一个结束语http_request.open()
尝试使用这个，并将工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="loadJSON()">Test</button>
<table class="test-table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>DOB</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td>
<label for="row1"></label>123</td>
<td>John</td>
<td>Doe</td>
<td>02-15-1982</td>
<td>M</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function loadJSON() {
var data_file = "test.json";
var http_request = new XMLHttpRequest();
try {
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function() {
if (http_request.readyState == 4) {
var jsonObj = JSON.parse(http_request.responseText);
var tr, td;
var tbody = document.getElementById("data");
// loop through data source
for (var i = 0; i < jsonObj.row.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsonObj.row[i].ID;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsonObj.row[i].FirstName;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsonObj.row[i].LastName;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsonObj.row[i].DOB;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsonObj.row[i].Gender;
}
}
}; // <----- This is the one you left off
http_request.open("GET", data_file, true);
http_request.send();
}
</script>
</body>
</html>
{
"row": [
{
"ID": "2",
"FirstName": "John",
"LastName": "Test",
"DOB": "03-12-1959",
"Gender": "M"
},
{
"ID": "3",
"FirstName": "Helen",
"LastName": "Test",
"DOB": "03-12-1959",
"Gender": "M"
}
]
}