个人中心
gpt4 book ai didi

javascript - Ajax 请求文本在 DOM 中闪烁

转载 作者：行者123 更新时间：2023-12-03 07:07:31 25 4
gpt4 key购买 nike

我遇到的问题是，从下拉菜单中选择一个项目后，我发出的 AJAX 请求会闪烁。从闪烁的文本来看，该请求似乎正在提取正确的信息。

它的工作方式是将鼠标悬停在下拉菜单上，然后单击 anchor 标记时显示类型电影。

我认为正在发生的事情是，在做出另一个选择之前我不会保留该流派，如果是我如何在选择新流派之前保留该流派值？如果不是我做错了什么？

我从代码中删除了所有“绒毛”，这样我们就只剩下骨架了。

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。

关于javascript - Ajax 请求文本在 DOM 中闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36756489/

25 4 0
文章推荐： javascript - Node.js 是否同时只执行一个上下文？
文章推荐： sql-server - 实现 MFA 后管道失败
文章推荐： azure - 使用 Azure 数据工厂丰富数据
文章推荐： javascript - 如何让我的 'Add Item' 按钮在我的 JSP 上工作，以便它可以将数据提交到我的数据库中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com