希望在显示搜索结果时更改URL

问题描述

我有这段代码，基本上可以在搜索时显示电影信息。但是页面的URL保持不变。我希望在显示电影信息时更改URL。例如，如果我在URL https://trendzmogul.com/movie-info/上搜索电影“ Tenet”，则搜索结果将显示在我想在URL https://trendzmogul.com/movie-info/tenet上显示的同一URL上。单击“更多详细信息”后，它应显示在URL https://trendzmogul.com/movie-info/tenet/more-details上 我还想为在搜索字段中进行的所有查询生成站点地图，以便Google可以为每个搜索结果编制索引。有什么办法可以做到这一点？

附带代码

//app.js

$(document).ready(()=>{
    $('#searchForm').on('submit',(e)=>{
        let searchText = $('#searchText').val();
        getMovies(searchText);
        e.preventDefault();
    });
});

function getMovies(searchText){
    
        axios.get('https://www.omdbapi.com?apikey=e72e93e7&s=' + searchText)
            .then((response) =>{
                console.log(response);
                let movies = response.data.Search;
                let output = '';
                let listMovies = $('#movies');
                $.each(movies,(index,movie) =>{
                    output += `
                        <div class="col-md-3 .out">
                            <div class="well text-center">
                                <img src="${movie.Poster}" class="thumbnail">
                                <h5>${movie.Title}</h5>
                                <a onClick="movieSelected('${movie.imdbID}')" class="btn" href="#">Movie Details</a>
                            </div>
                        </div>
                    `;
                });
                
                listMovies.html(output);
                
                
            })
            .catch((err) =>{
                console.log(err);
            });
}

function movieSelected(id){
    sessionStorage.setItem('movieId',id);
    window.location = 'movie.html';
    return false;
}

function getMovie(){
    let movieId = sessionStorage.getItem('movieId');

    axios.get('https://www.omdbapi.com?apikey=e72e93e7&i=' + movieId)
            .then((response) =>{
                console.log(response);
                let movie = response.data;
                console.log(movie);

                let output = `
                    <div class="row">
                        <div class="col-md-4">
                            <img src="${movie.Poster}" alt="">
                        </div>
                        <div class="col-md-8">
                            <h2>${movie.Title}</h2>
                            <ul class="list-group">
                                <li class="list-group-item"><strong>Genre:</strong> ${movie.Genre}</li>
                                <li class="list-group-item"><strong>Release:</strong> ${movie.Released}</li>
                                <li class="list-group-item"><strong>Rated:</strong> ${movie.Rated}</li>
                                <li class="list-group-item"><strong>IMDB rating:</strong> ${movie.imdbrating}</li>
                                <li class="list-group-item"><strong>Director:</strong> ${movie.Director}</li>
                                <li class="list-group-item"><strong>Writer:</strong> ${movie.Writer}</li>
                                <li class="list-group-item"><strong>Actors:</strong> ${movie.Actors}</li>
                                <li class="list-group-item"><strong>Runtime:</strong> ${movie.Runtime}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="well">
                            <h3>Plot</h3>
                            ${movie.Plot}
                            <hr>
                            <a href="https://imdb.com/title/${movie.imdbID}" target="_blank" class="btn btn-primary">View IMDB</a>
                            <a href="index.html" class="btn btn-warning">Go Back To Search</a>
                        </div>
                    </div>
                `
                $('#movie').html(output);
                
            })
            .catch((err) =>{
                console.log(err);
            });

}

/* style.css */

body{
    background: linear-gradient(rgb(248,246,246),rgb(231,229,229));
}

.navbar-brand{
    font-family: 'Akronim';
    color: red;
    font-size: 50px;
    font-weight: 400;
}

.land{
    height: 100vh;
}

.land img{
    height: 60vh;
    width: 60rem;
}

.search{
    background: none;
    width: 500px;
}

.search h2{
    font-family: 'Bitter';
    text-transform: uppercase;
    font-size: 2rem;
    color: rgb(134,0);
}

.search p{
    font-family: Roboto;
    color: black;
    font-size: 15px;
}

.form-control{
    height: 50px;
    border: 2px groove grey;
    background-color: rgb(248,246);
}

#movies img,#movie img{
    width: 100%;
}

#movies{
    margin-top: -11rem;
}

#movies .col-md-3 .well{
    height:500px;
}

#movies .col-md-3 img{
    height:350px;
}

#movies .well h5{
    color: black;
    font-family: 'Roboto';
}

#movies .btn{
    background-color: black;
}

.well-m{
    background-color: rgb(24,21,21);
    padding: 3rem;
    border-radius: 10px;
    
    margin-bottom: 3rem;
}



/* For small Screen */
@media only screen and (max-width: 768px){
    .land img{
        height: 400px;
        width: 380px;
        margin-left: 1.5rem;
        margin-top: -4rem;
    }

    .search{
        background: none;
        width: 350px;
        margin-top: -8rem;
        text-align: center;
        margin-left: 1rem;
    }

    .land{
        height: 150vh;
    }

    .navbar-brand{
        text-align: center;
        margin-left: 4rem;
    }
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Akronim|Bitter&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <title>Movie Info</title>
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">Movie Info</a>
            </div>
        </div>
    </nav>
    <div class="land row mt-3">
        <div class="col-md-7">
            <img src="./img/undraw_netflix_q00o.svg" alt="">
        </div>
        <div class="col-md-5">
            <div class="jumbotron search">
                <h2 class="text-center">Search for Any Movie</h2>
                <form id="searchForm">
                    <input type="text" class="form-control" id="searchText" placeholder="Search Movie">
                </form>
                <p class="text-center mt-4">Filter genres,subgenres,moods,themes,star rating,release date to dig
                    through movies in our database to find what you are looking for. Search Boxes within categories help
                    narrow down the characteristic you are looking for. For example,typing "comedy" into the Genres &
                    Subgenres will bring up Standup Comedy,Romantic Comedy,Screwball Comedy,etc.</p>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row" id="movies">

        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/app.js"></script>
</body>

</html>

<!-- separate html file -->
<!-- file name is movie.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Akronim|Bitter&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <title>Movie Info</title>
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">Movie Info</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="well-m" id="movie">
        
        </div>
    </div>

    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/app.js"></script>
    <script>
        getMovie();
    </script>
</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）