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

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

javascript php jquery json pagination

Javascript 从api.php获取数据后，使用JQuery进行分页,javascript,php,jquery,json,pagination,Javascript,Php,Jquery,Json,Pagination,这是我的密码- 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> <

这是我的密码-

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>

<?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注入。同时，阅读你如何做到这一点

基于以上几点和您的以下评论，解决方案如下所示：
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  »</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>

<?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; ?>'>«Prev  </a> <?php } if($offset < $total_rows - 1){ ?> <a href='' class='showmore' id='<?php echo $next; ?>'>Next  »</a> <?php } ?> </div> <?php } // close statement $stmt->close(); } } ?>

#展示{ 背景：红色； } $（文档）.ready（函数（）{ $（文档）.on（'单击'，'.showmore'，函数（事件）{ event.preventDefault（）； var offset=$（this.attr（'id'）； $.ajax({ 键入：“POST”， url:'api.php'，缓存：“false”，数据：{offset:offset}， beforeSend:function（）{ $（'#link div'）.html（'Loading…'）； }, 成功：功能（数据）{ $（'#link div'）。删除（）； $（'#show'）.html（数据）； }, 错误：函数（jqXHR、textStatus、errorshown）{ //错误 } }); }); });
api.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  »</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>

<?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; ?>'>«Prev  </a> <?php } if($offset < $total_rows - 1){ ?> <a href='' class='showmore' id='<?php echo $next; ?>'>Next  »</a> <?php } ?> </div> <?php } // close statement $stmt->close(); } } ?>

请解释我需要使用这些值进行分页。。你想要什么样的分页？另外，使用
setInterval（）
和
load（）
函数有什么意义？使用一个简单的AJAX请求。
setInterval（）
不是问题
load（）
正在调用[api.php]的结果。我想要一个只显示一个值的分页，下一页将显示另一个值。请检查这篇文章附带的图片，它显示了两个结果，但我想在下一页显示一个和另一个。你说的下一页是什么意思？是否要在下一次调用
load（）
函数时获取下一个结果？我的意思是，在单击
next>
后，将显示第二个结果。我已在下面给出了答案。希望这能解决您的问题。+1但是在点击
next>
a
@user3311692之后，我已经更新了我的答案。请投票并接受答案，如果它解决了您的问题。“谢谢”再问一个问题如果没有显示值（比如第二个值有一个next> 链接，因为没有显示值，所以不需要它）@user3311692我已经进一步更新了我的答案，现在它应该可以为您工作了。