Question

我正在尝试使用Jquery在同一选项卡中加载页面，但是页面会重新加载。因此，为了进行调试，我尝试在一个新标签页中打开该页面并运行良好，我也尝试使用location href打开一个类似于Google的常规页面，但是只是重新加载了页面。查看Web服务器日志，我看到了：

::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 + "&by=" + filterByValue;
    }
    var filterLimitValue = $("input[name='filterlimit']:checked").val();
    if (filterLimitValue != null) {
        query = query + "&limit=" + filterLimitValue;
    }
    var filterOrderValue = $("input[name='filterorder']:checked").val();
    if (filterOrderValue != null) {
        query = query + "&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", $valueformatted);
                        echo '<li><a href="search.php?by=serie_title&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>

Answer 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;
});

Answer 2

在HTML中，您具有：

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

type中button的默认form是submit，因此，单击它会导致表单提交，从而导致页面重新加载。解决方案是使用以下命令将按钮指定为常规按钮：

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

另一种解决方案是仅删除<form>和</form>标签，因为您实际上并没有在任何地方提交数据。然后，您可以不理会button，因为它不再存在于form中，因此不会发生submit。

location.href不起作用（重新加载同一页面）

2 个答案: