Question

在我提交带有演员/女演员姓名的表格后，它列出了电影，如果我想再次输入另一个名字进行搜索，我第一次点击进入，它会返回与第一次搜索相同的电影，如果我再次单击输入并输入新名称，它会列出该演员/女演员的电影。所以基本上它会在每一次提交时列出电影（假设演员/演员的名字改变了）。有没有解决的办法？我尝试在表单提交功能中添加sessionStorage.clear()，但这不起作用。我也试过actor.value.clear()，但是它清除了表单输入的值，它没有列出任何内容。非常感谢任何帮助，非常感谢提前。这是代码：

const form = document.getElementById("form");
form.addEventListener("submit", (e)=>{
    var actor = document.getElementById("actor").value;
    var byActor = document.getElementById("byActor");
    byActor.innerHTML = actor;
    discoverByActor(actor);
    moviesByActor();
    e.preventDefault();
})
function discoverByActor(actor){
    axios.get("https://api.themoviedb.org/3/search/person?api_key=<API_KEY>&language=en-US&query="+actor+'&page=1&include_adult=false')
        .then((response)=>{
            let actorId = response.data.results[0].id;
            sessionStorage.setItem("theActorId", actorId);
        })
};
function moviesByActor(){
    let actorId = sessionStorage.getItem("theActorId");
    axios.get("https://api.themoviedb.org/3/discover/movie?api_key=<API_KEY>&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_people="+actorId)
        .then((response)=>{
            console.log(response);
            let movies = response.data.results;
            let output = "";

            $.each(movies, (index, movie)=>{
                output +=`
                <div class="card">
                        <img src="http://image.tmdb.org/t/p/w300/${movie.poster_path}" onerror="this.onerror=null;this.src='../images/image2.png';">
                        <h3>${movie.title}</h3>
                        <p>${movie.vote_average} <strong>IMDB Rating</strong></p>
                        <p>Release date: <strong>${movie.release_date}</strong></p>
                        <a onclick="movieSelected('${movie.id}')" class="btn" href="#"> Movie Details </a>
                    </div>
                `
            })
            let moviesInfo = document.getElementById("movies");
            moviesInfo.innerHTML = output;
            //Display pages buttons.
            let pages = document.querySelector(".pages");
            pages.style.display = "flex";
            var actor = document.getElementById("actor");
        })
}

Answer 1

sessionStorage.setItem("theActorId", actorId);

在您收到axios.get的回复后才会发生

。但是，您之前会调用moviesByActor，而

let actorId = sessionStorage.getItem("theActorId");

您可能想要做的是：

form.addEventListener("submit", (e)=>{
    // ...
    discoverByActor(actor).then(moviesByActor);
    // ...
})

function discoverByActor(actor){
    return axios.get("https://api.themoviedb.org/3/search/person?api_key=<API_KEY>&language=en-US&query="+actor+'&page=1&include_adult=false')
    .then((response)=>{
        let actorId = response.data.results[0].id;
        sessionStorage.setItem("theActorId", actorId);
    })
};

此外，如果您在会话中实际上不需要actorId，则可以执行以下操作：

form.addEventListener("submit", (e)=>{
    // ...
    discoverByActor(actor).then(moviesByActor);
    // ...
})

function discoverByActor(actor){
    return axios.get("https://api.themoviedb.org/3/search/person?api_key=<API_KEY>&language=en-US&query="+actor+'&page=1&include_adult=false')
    .then((response)=>{
        return response.data.results[0].id;
    })
};

function moviesByActor(actorId) {
    axios.get( /* ... */ );
    // ...
}

JavaScript具有基于“事件循环”的并发模型。事件循环模型的一个非常有趣的特性是，与许多其他语言不同，JavaScript从不阻塞（alert或同步XHR除外，我确信其他几个）。

axios.get(url).then(doSomething)是异步的，所以当你这样做时，你告诉计算机“去取这个网址上的任何内容，一旦得到回复，就把回复发送到doSomething但在此期间，请继续运行此代码的其余部分。

所以，当您discoverByActor(actor); moviesByActor();时，即使您没有收到moviesByActor的任何内容，您也会调用discoverByActor 。

当然，如果你无法控制事情发生的顺序，就很难编程，所以为了解决这个问题，我们使用了所谓的Promises。

有了承诺，我们可以说，使用axios.get获取此网址，.then使用该结果执行此操作，.then使用 >返回做其他事情。

所以，我discoverByActor返回axios.get，因此我可以访问.then方法，这样我就可以忍受moviesByActor拥有所需的数据跑。

更改输入值时如何重置表单的输入值？

1 个答案: