GET請求到表

我有這個下一個HTML文檔，它必須加載一個表格，它充滿了我從XMLHttpRequest中取回的值。GET請求到表

當我嘗試運行該頁面時，它不會返回任何類似於表格的內容，因此如果有人看到此代碼中存在什麼問題，請幫助！

<!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>

來源

2013-05-14 Kevin Baeyens

*你*回來了嗎？ –

我只能用css取回我的頁面。一切！免除！

獲取的回 –

爲什麼要使用普通的XMLHttpRequest當你使用jQuery我不明白，你的代碼將不能在IE瀏覽 –

經過幾個小時的工作，我找到了解決方案。希望我可以幫你們中的一些人：

<!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>

來源

2013-05-16 01:21:16

回答

相關問題