有没有办法在不刷新的情况下在同一个选项卡中打开链接？

Question

所以我试图像 Netflix 那样进行搜索并解释一下，当你输入一个字母时，链接会发生变化，所以就像这个 search.php?search=*无论查询是什么* 并且它不会刷新页面，这里是到目前为止我的看法：

搜索.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form id="form">
        <input type="text" id="search" placeholder="Search">
    </form>

    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable) { return pair[1]; }
            }
            return(false);
        }

        function getSearchQuery() {
            $.ajax({
                type : 'GET',
                url : 'functions/get.php',
                data: 'search=' + getQueryVariable("search"),

                success : function(html) {
                    $("#form").html(html);
                }
            });
        }

        $("#search").keyup(function(event) {
            var query = $('#search').val();
            event.preventDefault();
            location.replace('search.php?search=' + query);
        });
    </script>
</body>
</html>

get.php

<?php

    $search = isset($_GET['search']) ? $_GET['search'] : '';

    echo '<input type="text" id="search" placeholder="Search" value="'.$search.'">';

?>

所以我唯一的问题是它会刷新。 有什么办法可以阻止它刷新，只更新上面的链接？

Answer 1

您将转到 URL 并用它覆盖浏览器历史记录中的页面。 （我假设这是正在访问的window object 上的location 。）

location.replace('search.php?search=' + query);

您应该使用window.location.hash并在hashchanged ( hashchange ?) 事件中处理编辑，或者只是删除# stuff 并手动处理内容。

可能想要手动跟踪它是如何工作的......另外，如果有人点击搜索按钮怎么办？

有没有办法在不刷新的情况下在同一个选项卡中打开链接？

问题描述

1 个解决方案

解决方案1
1 2020-06-18 00:58:50

有没有办法在不刷新的情况下在同一个选项卡中打开链接？

问题描述

1 个解决方案

解决方案1 1 2020-06-18 00:58:50

解决方案1
1 2020-06-18 00:58:50