从api.php获取数据后，使用JQuery进行分页

Make a pagination using JQuery after getting data from api.php

本文关键字：JQuery 使用 分页 api php 获取 数据      更新时间：2023-09-26

我的代码-

client.php 

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
    #show{
        background:red;
    }
</style>
</head>
<body>
<?php 
<div id="show"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        setInterval(function () {
            $('#show').load('api.php')
        });
    });
</script>
</body>
</html>

api.php 

<?php 
$conn = new mysqli('localhost', 'root', '', 'ajax01');
if ($conn->connect_error) {
    die("Connection error: " . $conn->connect_error);
}
$result = $conn->query("SELECT name FROM variables");
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo $row['name'] . '<br>';
    }
}
?>

这些代码给我的结果是-

以上代码的结果

我正在从数据库中获取值，它正在获取所有数据。因此，我需要一个具有这些值的分页。需要帮助。

根据你的评论，

我想要一个分页，将只显示一个值，下一页将显示另一个…点击next>

后显示第二个结果

这里有几件事你需要考虑，

  • 代替setInterval()和load()函数，只需使用AJAX请求来实现分页功能
  • 使用预处理语句，因为这将帮助您防止SQL注入。另外，请阅读如何在PHP中防止SQL注入。

基于以上几点和你下面的评论，解决方案应该是这样的:

client.php: 

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
    #show{
        background:red;
    }
</style>
</head>
<body>
<div id="show">
    <?php
        $conn = new mysqli('localhost', 'root', '', 'ajax01');
        if ($conn->connect_error) {
            die("Connection error: " . $conn->connect_error);
        }
        // prepare query statement
        if($stmt = $conn->prepare("SELECT name FROM variables LIMIT 0, 1")){
            // execute statement
            $stmt->execute();
            // bind result variables
            $stmt->bind_result($name);
            // fetch values
            $stmt->fetch();
            // display name and pagination link
            if(isset($name) && !empty($name)){
                echo $name . '<br />';
                ?>
                <div id='link-div' style='background-color:#ffffff'>
                    <a href='' class='showmore' id='1'>Next&nbsp;&nbsp;&raquo;</a>
                </div>
                <?php
            }
            // close statement
            $stmt->close();
        }
    ?>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click','.showmore',function(event){
            event.preventDefault();
            var offset = $(this).attr('id');
            $.ajax({
                type: 'POST',
                url: 'api.php',
                cache: 'false',
                data: {offset: offset},
                beforeSend: function(){
                    $('#link-div').html('<span>Loading...</span>');
                },
                success: function(data){
                    $('#link-div').remove();
                    $('#show').html(data);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    // error
                }
            });
        });
    });
</script>
</body>
</html>

api.php: 

<?php
    if(isset($_POST['offset'])){
        $offset = $_POST['offset'];
        $prev = $offset - 1;  // Previous link in the pagination series
        $next = $offset + 1;  // Next link in the pagination series
        $conn = new mysqli('localhost', 'root', '', 'ajax01');
        if ($conn->connect_error) {
            die("Connection error: " . $conn->connect_error);
        }
        // prepare query statement
        if($stmt = $conn->prepare("SELECT COUNT(name) FROM variables")){
            // execute statement
            $stmt->execute();
            // bind result variables
            $stmt->bind_result($total_rows);
            // fetch values
            $stmt->fetch();
            // close statement
            $stmt->close();
        }
        // prepare query statement
        if($stmt = $conn->prepare("SELECT name FROM variables LIMIT ?, 1")){
            // bind parameter
            $stmt->bind_param('i', $offset);
            // execute statement
            $stmt->execute();
            // bind result variables
            $stmt->bind_result($name);
            // fetch values
            $stmt->fetch();
            // display name and pagination link
            if(isset($name) && !empty($name)){
                echo $name . '<br />';
                ?>
                <div id='link-div' style='background-color:#ffffff'>
                    <?php
                        if($offset > 0){
                            ?>
                            <a href='' class='showmore' id='<?php echo $prev; ?>'>&laquo;Prev&nbsp;&nbsp;</a>
                            <?php
                        }
                        if($offset < $total_rows - 1){
                            ?>
                            <a href='' class='showmore' id='<?php echo $next; ?>'>Next&nbsp;&nbsp;&raquo;</a>
                            <?php
                        }
                    ?>
                </div>
                <?php
            }
            // close statement
            $stmt->close();
        }
    }
?>
相关文章：