Question

我有下一个html文档，它必须加载一个表，该表填充了我从XMLHttpRequest返回的值。

当我尝试运行该页面时，它不会提供任何类似表格的内容，所以如果有人看到此代码中存在的问题，请帮助!!

<!doctype html>

<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evenementen | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
        initialiseListEvenementen();
};  

initialiseListEvenementen() {
    var BASE_URL = "http://localhost:8080/OnzeBuurt2/resources/";

    var events = [];
    //load the groups from the back-end
    var request = new XMLHttpRequest();
    request.open("GET", BASE_URL + "events");
    request.onload = function() {
        if(request.status === 200) {
            events = JSON.parse(request.responseText);
            for(var i = 0; i < events.length; i++) {
                $("#eventList").append(createListElementForEvent(i));
            }
            if(events.length > 0) {
                $("#eventList").listview('refresh');
            } else {
                console.log("Error");
            }
        } else {
            console.log("Error loading groups: " + request.status + " - "+ request.statusText);
        }
    };
    request.send(null);
}

function createListElementForEvent(eventIndex) {

    var datum = $("<p>").text("Datum: " + events[eventIndex].datum);
    var titel = $("<p>").text("Titel: " + events[eventIndex].titel);
    var details = $("<p>").text("Details: " + events[eventIndex].details);
    var auteur = $("<p>").text("auteur: " + events[eventIndex].auteur.naam);
    var latitude = $("<p>").text("Datum: " + events[eventIndex].locatie.latitude);
    var longitude = $("<p>").text("Datum: " + events[eventIndex].locatie.longitude);

    return $("<li>").append(datum).append(titel).append(details).append(auteur).append(latitude).append(longitude);
}

</script>

</head>
<body class="body2">
<div class="gridContainer clearfix">
  <div class="header2">
        <center>
        Evenementen
        </center>
  </div>

    <ul id="eventList" class="lijst"></ul>

        <div id="home2">
            <form name="input" action="" method="get">
                <a href="welkom.html"><img src="home.png" alt="Home" /></a>
            </form>
        </div>

        <div id="terug2">
            <form name="input" action="" method="get">
                <a href="bekijken.html"><img id="btnterug" src="vorige.png" alt="Vorige" /></a>
            </form>
        </div>
</div>
</body>
</html>

Answer 1

经过几个小时的工作，我找到了解决方案。希望我能帮助你们中的一些人：

<!doctype html>
 <html class="">

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Evenementen | Sociale buurt</title>
 <link href="boilerplate.css" rel="stylesheet" type="text/css">
 <link href="onzebuurt.css" rel="stylesheet" type="text/css">

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
 var url = "http://localhost:8080/OnzeBuurt2/resources/events";
 var events = [];

 $(document).ready(function() {
  var request = new XMLHttpRequest();
  request.open("GET", url);
  request.onload = function() {
   if(request.status === 200) {
                                events = JSON.parse(request.responseText);
    for(var i = 0; i < events.length; i++) {
     $("#eventList").append(createListElementForEvent(i));
    }
                                if(events.length > 0) {
     $("#eventList").listview('refresh');
    } else {
     console.log("Error");
    }
   } else {
   alert("fout gegaan");
            console.log("Error loading groups: " + request.status + " - "+ request.statusText);
        }
    };
    request.send(null);
    });

    function createListElementForEvent(eventIndex) {

  var datum = $("<td>").text(events[eventIndex].datum);
  var titel = $("<td>").text(events[eventIndex].titel + " - " + events[eventIndex].details);
  var auteur = $("<td>").text(events[eventIndex].auteur.naam);

  return $("<tr>").append(datum).append(titel).append(auteur);
 } 
 </script>

 </head>
 <body class="body2">
 <div class="gridContainer clearfix">
   <div class="header2">
   <center>
   Evenementen
   </center>
   </div>
 </div>

  <div class="tabelEvents">
  <table id="eventList" class="tabel" border="1">
  <tr><th>Datum</th><th>Titel</th><th>Auteur</th></tr>
  </table>
  </div>

   <div id="home2">
    <form name="input" action="" method="get">
     <a href="welkom.html"><img src="home.png" alt="Home" /></a>
    </form>
   </div>

   <div id="terug2">
    <form name="input" action="" method="get">
     <a href="bekijken.html"><img id="btnterug" src="vorige.png" alt="Vorige" /></a>
    </form>
   </div>
 </body>
 </html>

GET请求进入表

1 个答案: