有沒有辦法在不刷新的情況下在同一個選項卡中打開鏈接？

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