控制台在点击列表项时不会记录XMLHttpRequest响应文本

我对编程一般都很陌生，所以你们中的一些人可能会发现这个问题很容易修复，但我已经尝试了一堆东西并浏览了互联网寻找答案，但没有发现。我试图将数据载入我的网站，这是一个学校项目。为此，我从xmlhttprequest获取数据，并且我的计划是使用从请求中获取的那个来替换页面上的当前文本。 xmlhttprequest在单击列表项时运行。该项目还处于初期阶段。控制台在点击列表项时不会记录XMLHttpRequest响应文本

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hyr Stuga!</title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body style="background-image:url(background.jpg)"> 
    <!-- Menu that will remain static --> 
    <ul id="navbar"> 
     <li id="0"><a href="">Hem</a></li> 
     <li id="1"><a href="">Område</a></li> 
     <li id="2"><a href="">Bilder</a></li> 
     <li id="3"><a href="">Kontakt</a></li> 
     <li id="4" style="color:white" class="active"><a href="">Recensioner</a></li> 
    </ul> 
    <script src="main.js"></script> 
    <!-- Text to be shown on startpage of page --> 
    <h1>Välkommen!</h1> 
    <p>Klicka på någon av menyerna för att får veta mer!</p> 
</body> 
</html>

这里是连接到HTML文件中的JS：

//List that contains all the items in my Navigation bar 
var navBarItems = []; 
for(var i=0; i < 5; i++){ 
    navBarItems.push(i); 
} 
for(var i=0; i<navBarItems.length;i++){ 
    navBarItems[i] = document.getElementById(i); 
} 


//When you click a navigation bar item, in this case the "hem" item, the console should log some JSON 
navBarItems[0].addEventListener("click", function(){ 
    var request = new XMLHttpRequest(); 
    request.open("GET", "https://raw.githubusercontent.com/finblomma/Rudqvist/master/data.json"); 
    request.onload = function(){ 
     var recievedData = JSON.parse(request.responseText); 
     console.log(recievedData[0]) 
    }; 
    request.send(); 
}); 

navBarItems[1].addEventListener("click", function(){ 
    //... 
}) 

//...

我的问题是，控制台不记录任何东西。我试着用html中的“onload”属性发送请求，并且这似乎工作正常。但是当我点击一个列表项时，我希望它加载。这里谁知道我在做什么错了？

来源

2017-05-31 David Carlsson

你遇到的问题是，当链接被点击时，页面正在重新加载，然后脚本才能完成它的工作。你需要做的是防止链接进行默认行为。这可以通过Javascript函数event.preventDefault();来实现。该函数接受一个事件并防止它的默认行为发生。下面是一些阅读材料，解释功能进一步：https://www.w3schools.com/jsref/event_preventdefault.asp

所以，你需要做的，是存储在一个变量，在这种情况下，我已经使用e的addEventListener功能的事件。那么你的事件监听器里面你可以做e.preventDefault();

navBarItems[0].addEventListener("click", function(e){ 
    // Here is the peventDefault function. The e variable in the function above holds the event. 
    e.preventDefault(); 
    var request = new XMLHttpRequest(); 
    request.open("GET", "https://raw.githubusercontent.com/finblomma/Rudqvist/master/data.json"); 
    request.onload = function(){ 
     var recievedData = JSON.parse(request.responseText); 
     console.log(recievedData[0]) 
    }; 
    request.send(); 
}); 

navBarItems[1].addEventListener("click", function(){ 
})

来源

2017-05-31 12:24:15 WizardCoder

控制台在点击列表项时不会记录XMLHttpRequest响应文本

回答

相关问题