Ajax对JSON文件的请求不工作

Ajax request to JSON file not working

本文关键字：请求 工作 文件 JSON Ajax      更新时间：2023-09-26

我有一个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();
  }

我在哪里出错了，我能做些什么来解决这个问题?

在函数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"
        }
    ]
}
相关文章：