Ajax请求文本在DOM中闪烁
Ajax request text flashes in the DOM
我遇到的问题是,从下拉菜单中选择一个项目后,我发出的AJAX请求会闪烁。从闪烁的文本来看,请求似乎提取了正确的信息。
它的工作方式应该是将鼠标悬停在下拉菜单上,当点击锚标签时,显示电影类型。
我认为现在发生的事情是,在做出另一个选择之前,我不会坚持那个流派,如果是这样的话,在选择一个新的流派之前,我如何保持流派的价值?如果不是因为我做错了什么?
我从代码中删除了所有的"绒毛",所以我们只剩下骨头了。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<style>
.dropdown{
width: 151px;
}
.dropbtn{
width: 150px;
height: 30px;
border: 1px solid black;
border-radius: 2px;
background: white;
}
a{
display: block;
background-color: lightgreen;
width: 148px;
height: 30px;
text-align: center;
text-decoration: none;
padding-top: 10px;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
a:hover{
background-color: lightblue;
}
.content{
display: none;
}
.dropdown:hover .content{
display: block;
}
</style>
</head>
<body onload='movieScript()'>
<div class="dropdown">
<button class="dropbtn">Select</button>
<div class="content">
<a class="anchor" href="" onclick="generateMovies('Comedy')">Comedy</a>
<a class="anchor" href="" onclick="generateMovies('Action')">Action</a>
<a class="anchor" href="" onclick="generateMovies('Biography')">Biography</a>
<a class="anchor" href="" onclick="generateMovies('Drama')">Drama</a>
<a class="anchor" href="" onclick="generateMovies('Crime')">Crime</a>
</div>
</div>
<div id="selectedMovies"></div>
</body>
</html>
JS:
var titles = [];//Will hold an array of titles
var imgs = [];//Will hold an array of imgs
var pos = 0;//Global position indicator which will be shared by all global arrays
movieScript = function(){
var movieData = "http://test.frontendhero.nl/movie-challenge/movies.json";
var myRequest;
//Test if XMLHttpRequest is available in active browser
try{
myRequest = new XMLHttpRequest();
}
catch(e){
try{
myRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert("Something broke!");
return false;
}
}
}
myRequest.onreadystatechange = function(){
if(myRequest.readyState === 4 && myRequest.status === 200){
var jsonObj = JSON.parse(myRequest.responseText);//Grabs json object
var data = jsonObj.data; //Grabbing data objects from json
var assets; //Will hold array of data objects
var movies =[]; //Array for actionMovie objects
var DOM = document.getElementById('selectedMovies');
generateMovies = function(userGenre){
//Outer level of json
for(var key in data){
assets = data[key].assets;
//Movie data of the json file cross checked with user selected genre
for(var x in assets){
if(assets[x].genre === userGenre){
movies[x] = assets[x];
}
}
}
//Add each element to an array of titles and imgms
for(var key in movies){
DOM.innerHTML = movies[key].title + movies[key].img;
}
}
}
}
myRequest.open("GET", movieData, true);
myRequest.send();
};
感谢您的帮助。
单击链接时,链接到href
URL,空URL表示重新加载当前页面。您可以通过从onclick
:返回false
来防止这种情况发生
<a class="anchor" href="" onclick="generateMovies('Comedy'); return false;">Comedy</a>
或者您可以使用javascript:void(0)
URL:
<a class="anchor" href="javascript:void(0)" onclick="generateMovies('Comedy')">Comedy</a>
或者您可以使用您发现的#
URL。
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 如何在DOM元素上按类型构建此函数
- Windows形成web浏览器控件和Javascript更改的DOM
- 使用jQuery以红色和黑色闪烁文本
- Datatables:通过DOM数据源中的名称引用列
- 在DOM中查找一个模式并替换它's的内容使用jquery
- DOM事件通过JSON转换为java
- 将DOM节点值与字符串Javascript进行比较
- delete在Object上效率低下,但在DOM Element's的数据属性,与null out相比
- 我的Tizen应用程序在点击时会闪烁
- 流星中DOM的繁殖
- IE6在启用/禁用文本字段上闪烁
- DOM元素和angular元素之间的主要区别是什么
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- Ajax请求文本在DOM中闪烁
- Firefox在动画结束时从DOM中删除元素时会闪烁,而在Chrome中则可以正常工作
- HTML5 DOM闪烁问题