Расположение.href не работает (перезагрузите ту же страницу)

ProgramBox

Расположение.href не работает (перезагрузите ту же страницу)

Post author:admin
Запись опубликована:16 апреля, 2023
Post category:Вопросы по программированию

#javascript #php #jquery

Вопрос:

Я пытаюсь загрузить страницу на той же вкладке с помощью Jquery, но страница перезагружается. Итак, для отладки я попытался открыть страницу на новой вкладке и работает хорошо, я попытался также открыть общую страницу, подобную странице Google, используя location href, но страница просто перезагрузилась. Проверяя журналы веб-сервера, которые я вижу:

 ::1 - - [13/Aug/2020:23:04:27  0200] "GET /search.php?q=zagor HTTP/1.1" 200 10717
::1 - - [13/Aug/2020:23:04:27  0200] "GET /index.php HTTP/1.1" 200 52293

Таким образом, кажется, что после вызова происходит вызов в то же место, которое перезаписывает первое, но я не могу найти, где это происходит.

Функция Jquery:

 $('.site-btn').on('click', function() {
    var query = "search.php";
    var qValue = $("input[id='q']").val();
    
    if (qValue.length != 0) {
        query = query   "?q="   qValue;
    }
    var filterByValue = $("input[name='filterby']:checked").val();
    if (filterByValue != null) {
        query = query   "amp;by="   filterByValue;
    }
    var filterLimitValue = $("input[name='filterlimit']:checked").val();
    if (filterLimitValue != null) {
        query = query   "amp;limit="   filterLimitValue;
    }
    var filterOrderValue = $("input[name='filterorder']:checked").val();
    if (filterOrderValue != null) {
        query = query   "amp;order="   filterOrderValue;
    }
    location.href = query;
});

И это страница PHP:

 <?php session_start();?>
<!DOCTYPE html>
<html>

<head>
<?php
    include("includes/head.php");
?>
</head>

<body>
<!-- Page Preloder -->
<div id="preloder">
    <div class="loader"></div>
</div>

<!-- humburger Begin -->
<div class="humburger_menu_overlay"></div>
<div class="humburger_menu_wrapper">
    <div class="humburger_menu_logo">
        <a href="#"><img src="img/logo.png" alt=""></a>
    </div>
    <div class="humburger_menu_widget">
        <div class="header_top_right_auth">
            <?php 
                if(isset($_SESSION['logged'])) {    
                    echo '<li><a href="logout.php" ><i class="fa fa-user"></i>Logout</a></li>';
                }
                else {
                    echo '<li><a href="access.php" ><i class="fa fa-user"></i>Sign Up / Login</a></li>';
                }
            ?>
        </div>
    </div>
    <nav class="humburger_menu_nav mobile-menu">
        <ul>
            <li class="active"><a href="./index.php">Home</a></li>
            <li><a href="./search.php">Advanced Search</a></li>
            <li><a href="./contact.php">Contact</a></li>
            <?php
                if(isset($_SESSION['logged'])) {    
                    echo '<li><a href="#"><i class="fa fa-heart"></i>MyComics</a></li>';
                }
            ?>
        </ul>
    </nav>
    <div id="mobile-menu-wrap"></div>
    <div class="humburger_menu_contact"></div>
</div>
<!-- humburger End -->

<!-- Header Section Begin -->
<header class="header">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="header_logo">
                    <a href="./index.php"><img src="img/logo.png" alt=""></a>
                </div>
            </div>
            <div class="col-lg-7">
                <nav class="header_menu">
                    <ul>
                        <li id="index_page"><a href="./index.php">Home</a></li>
                        <li id="search_page"><a href="./search.php">Advanced Search</a></li>
                        <li id="contact_page"><a href="./contact.php">Contact</a></li>
                        <?php 
                            if(isset($_SESSION['logged'])) {    
                                echo '<li><a href="logout.php" ><i class="fa fa-user"></i>Logout</a></li>';
                            }
                            else {
                                echo '<li><a href="access.php" ><i class="fa fa-user"></i>Sign Up / Login</a></li>';
                            }
                        ?>  
                    </ul>
                </nav>
            </div>
            <div class="col-lg-2">
                <div class="header_menu">
                    <ul>
                        <li></li>
                        <?php
                        if(isset($_SESSION['logged'])) {    
                                echo '<li id="mycomics_page"><a href="mycomics.php"><i class="fa fa-heart"></i>MyComics</a></li>';
                            }
                        ?>
                    </ul> 
                </div>
            </div>
        </div>
        <div class="humburger_open">
            <i class="fa fa-bars"></i>
        </div>
    </div>
</header>
<!-- Header Section End -->

<!-- Hero Section Begin -->
<section class="hero hero-normal">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="hero_categories">
                    <div class="hero_categories_all">
                        <i class="fa fa-bars"></i>
                        <span>Latest Series</span>
                    </div>
                    <ul>
                    <?php
                        require('includes/config.php');
                        $query="SELECT * FROM italiancomics group by serie_title ORDER BY issue_date DESC LIMIT 10";
                        $res=mysqli_query($conn,$query);                    
                        while($row=mysqli_fetch_assoc($res)) {  
                            $valueformatted = str_replace("_"," ",$row["serie_title"]);
                            $valueformatted = str_replace("amp;","amp;amp", $valueformatted);
                        echo '<li><a href="search.php?by=serie_titleamp;q='.$row['serie_title'].'">'.$valueformatted.'</a></li>';          
                        }           
                        mysqli_close($conn);
                    ?>
                    </ul>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="hero_search">
                    <div class="hero_search_form">
                        <form>
                            <input type="text" id="q" placeholder="What comic are you searching?">
                            <button class="site-btn">SEARCH</button>
                        </form>
                    </div>      
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Hero Section End -->


<!-- Featured Section Begin -->
<section class="featured spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title">
                    <h2>Latest Comics Added:</h2>
                </div>
                
            </div>
        </div>
        <div class="row featured_filter">
        <?php
                require('includes/config.php');
                $query="SELECT * FROM italiancomics ORDER BY issue_date DESC LIMIT 40";
                $res=mysqli_query($conn,$query);                    
                while($row=mysqli_fetch_assoc($res)) {  
                    echo '<div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="featured_item">
                                <div class="featured_item_pic" >
                                    <a href="detail.php?id=' .$row['link_albo']. '">
                                        <img src="'.$row['issue_link_image']. '" width="200" height="270" class="center">
                                    </a>
                                    <ul class="featured_item_pic_hover">';
                                        if(isset($_SESSION['logged'])) {
                                            $totalq="SELECT count(*) "total" FROM italiancomics INNER JOIN user_fav_comics ON italiancomics.link_albo=user_fav_comics.comic WHERE italiancomics.link_albo="" . $row['link_albo'] ."" AND user_fav_comics.u_unm="" . $_SESSION['unm'] . "" LIMIT 1";
                                            $totalres=mysqli_query($conn,$totalq) or die("Can't Execute Query...");
                                            $totalrow=mysqli_fetch_assoc($totalres);
                                            if($totalrow['total']==1){
                                                echo '<li><a id="heart_index" style="color:#7fad39;"><i class="fa fa-heart"></i></a></li>';
                                            }
                                            else{
                                                echo'<li><a id="heart_index"><i class="fa fa-heart"></i></a></li>';
                                            }
                                            $totalq="SELECT count(*) "total" FROM italiancomics INNER JOIN user_read_comics ON italiancomics.link_albo=user_read_comics.comic WHERE italiancomics.link_albo="" . $row['link_albo'] ."" AND user_read_comics.u_unm="" . $_SESSION['unm'] . "" LIMIT 1";
                                            $totalres=mysqli_query($conn,$totalq) or die("Can't Execute Query...");
                                            $totalrow=mysqli_fetch_assoc($totalres);
                                            if($totalrow['total']==1){
                                                echo '<li><a style="color:#7fad39;"><i class="fa fa-book"></i></a></li>';
                                            }
                                            else{
                                                echo'<li><a><i class="fa fa-book"></i></a></li>';
                                            }
                                            $totalq="SELECT count(*) "total" FROM italiancomics INNER JOIN user_bought_comics ON italiancomics.link_albo=user_bought_comics.comic WHERE italiancomics.link_albo="" . $row['link_albo'] ."" AND user_bought_comics.u_unm="" . $_SESSION['unm'] . "" LIMIT 1";
                                            $totalres=mysqli_query($conn,$totalq) or die("Can't Execute Query...");
                                            $totalrow=mysqli_fetch_assoc($totalres);
                                            if($totalrow['total']==1){
                                                echo '<li><a style="color:#7fad39;"><i class="fa fa-archive"></i></a></li>';
                                            }
                                            else{
                                                echo'<li><a><i class="fa fa-archive"></i></a></li>';
                                            }                                            
                                        }
                                        else {
                                            echo '<li><a><i class="fa fa-heart"></i></a></li>';
                                            echo '<li><a><i class="fa fa-book"></i></a></li>';
                                            echo '<li><a><i class="fa fa-archive"></i></a></li>';
                                        }
                    echo            '</ul>
                                </div>
                                <div class="featured_item_text">
                                    <a href="detail.php?id=' .$row['link_albo']. '">
                                        <h5>'.$row['issue_title']. '</h5>
                                    </a>
                                </div>
                            </div>
                        </div>';
                }           
                mysqli_close($conn);
            ?>
        </div>
    </div>
</section>
<!-- Featured Section End -->

<!-- Footer Section Begin -->
<?php
    include("includes/footer.inc.php");
?>
<!-- Footer Section End -->
</body>
</html>

Ответ №1:

Попробуйте передать event в функцию, а затем event.preventDefault() в нее, вот так // первая строка, а затем выполните свою логику

 $('.site-btn').on('click', function( event ) {
    event.preventDefault();
    // ...
    var query = "search.php";
    var qValue = $("input[id='q']").val();
    // ..
    location.href = query;
});

1. Вау, это творит волшебство. У меня есть вопрос, несколько часов назад он работал хорошо, но после некоторого исправления опечаток появляется эта ошибка, и ваше решение является единственным рабочим. У вас есть какие-то идеи о том, почему это происходит? Поскольку я думаю, что нажатие кнопки запускает классическое действие кнопки, которое работает как отправка, может ли это быть правильным наблюдением?

2. да, вы правы, по умолчанию используется классическое действие отправки, рад, что у вас это сработало!

3. @Fabio Теперь, когда я понимаю вашу проблему, я могу сказать вам, что этот ответ является обходным, но не фактическим решением. Смотрите мой ответ для правильного подхода.

Ответ №2:

В вашем HTML у вас есть:

 <form>
  <input type="text" id="q" placeholder="What comic are you searching?">
  <button class="site-btn">SEARCH</button>
</form>

Значение type по button умолчанию в a form равно submit , поэтому, когда вы нажимаете на него, вы вызываете отправку формы, что вызывает перезагрузку страницы. Решение состоит в том, чтобы указать кнопку как обычную кнопку с:

 <button type="button" class="site-btn">SEARCH</button>

Другим решением было бы просто удалить теги <form> и </form> , потому что на самом деле вы никуда не отправляете данные. Тогда вы можете оставить button в покое, потому что этого form больше не будет в a, так что ничего submit не произойдет.

1. Это ничего не меняет, страница просто перезагружается. Я проверяю содержимое запроса, и оно правильное.

2. @Fabio Строка запроса не изменяет фактическое местоположение, к которому переходит браузер (по крайней мере, не напрямую). Он просто передает данные на указанную страницу. Например, добавление amp;order=27 в https://example.com создает URL https://example.comamp;order=27 , но вы все равно попадете на https://example.com .

3. Я только что обновил вопрос с помощью журналов веб-сервера.

4. Это правда, я использовал IE для тестирования, и проблема не возникает, я обнаруживаю, что тип кнопки по умолчанию зависит от браузера, и для большинства это submit. На самом деле я нарезал его кубиками, используя Edge. Спасибо за вашу помощь

5. @Fabio Тип кнопки по умолчанию не зависит от браузера — это submit и это в спецификации HTML 5 , где говорится , что отсутствующее значение по умолчанию и недопустимое значение по умолчанию являются состоянием кнопки отправки. С чем вы сталкиваетесь, так это с тем, что некоторые браузеры слишком старые, чтобы следовать этой спецификации. Хорошо известно, что, если у вас нет конкретного проекта, требующего IE, вам не следует его использовать, поскольку Microsoft прекратила его разработку несколько лет назад, и он не соответствует стандартам.