對JSON文件的Ajax請求不起作用
[英]Ajax request to JSON file not working
問題描述
我有一個HTML表，試圖用存儲在外部JSON文件中的數據填充該表。 我正在嘗試使用純JavaScript（沒有JS庫）對其發出AJAX請求，但是當我單擊“測試”按鈕時沒有任何反應。 數據將不會填充。 這是我的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();
}
我在哪里出錯了，該怎么解決？ 任何幫助，將不勝感激。
1 個解決方案
解決方案1
0 已采納 2015-10-25 17:41:39
您可能在http_request.open()之前的函數中錯過了一個結束符} 。
嘗試這一點，將起作用。
HTML文件
<!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>
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"
}
]
}
對 JSON 的 Ajax 請求不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.