Question

我有一个显示产品图片的页面。在其下方，我有Description，Contact Details和Comments的标签。当您点击Comments标签时，评论页面会使用div="info"加载到Jquery。

products.php：

<html>
<head></head>
<body>
<img src="image.jpg">
<hr> 
<a id="det"><h3>Details</h3></a> &nbsp<a id="contact"><h3>Contact</h3></a>
 &nbsp<a id="comments"><h3>Comments</h3></a>

<div id="info"></div>
</body>
<html>

Jquery的：

<script>
$(document).ready(function(){
   $("#comments").click(function(){
      $("#info").load("comments.php");
   });
});
</script>

下面的comments.php页面使用分页作为评论。

当我点击分页链接时，页面会刷新comments.php?page=*将其从div="info"中删除。当我使用id="info"时，如何将注释保留在div pagination中}？

的comments.php：

<?php
// 1)Set current page
$current_page = ((isset($_GET['page']) && $_GET['page'] > 0) ?    
(int)$_GET['page'] : 1);

require 'connect.php';
// 2)Get total amount of rows
$sql = "SELECT * FROM comments";
$result=mysqli_query($conn,$sql);
$totalrows = mysqli_num_rows($result);

// Offset - calculation to skip to the data you want to display
 $results_per_page = 10;
 $offset = ($current_page-1)*$results_per_page;
 ?>

 /*------- Comments Form -----*/
 /*------- Comments from Database ---- */

 <?php

   //Here is the code for displaying link and page number.
   $number_page = $totalrows/$results_per_page;
   for ( $page = 1; $page <= $number_page; $page ++ )
   {
     echo "<a href='comments.php?page={$page}'>{$page}</a>";
    }

 ?>

Answer 1

您需要将click事件附加到ajax partial中加载的链接。最简单的方法是将类属性添加到要通过ajax加载的任何链接，然后将您的事件附加到该类。

示例：

<?php
// example just increments the page param
if(strtolower(filter_input(INPUT_SERVER, 'HTTP_X_REQUESTED_WITH', FILTER_SANITIZE_STRING)) == 'xmlhttprequest') {
    die('<a class="ajaxlink" href="?page='.($_GET['page']+1).'">Goto page '.($_GET['page']+1).'</a>');
}
?>
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>

    <body>

        <h3><a class="ajaxlink" href="index.php">Contact</a></h3>

        <div id="info"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
        $(document).on("click", ".ajaxlink", function(event) {
            event.preventDefault();

            if ($(this).prop('href').length > 0) {
                $("#info").load($(this).prop('href'));
            }
            return false;
        });
        </script>
    </body>

</html>

Answer 2

你知道......你可以通过js结束这个问题，使#info元素内的每个链接都只在其中更新。不确定是否是你需要的。

$('#info').on('click', 'a', function (e){
    e.preventDefault();
    $("#info").load($(this).attr('href'));
});

无法在div中进行分页

2 个答案: