gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 21:02:26 25 4
gpt4 key购买 nike

这是我的代码-

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>';
}
}
?>

这些代码给我的结果如下-

Result of above codes

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

最佳答案

根据您的评论,

I want a pagination that will show only one value and next page will show another...second result will show after click on next>

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

  • 无需使用 setInterval()load() 函数,只需使用 AJAX 请求即可实现分页功能
  • 使用prepared statements因为这将帮助您防止 SQL 注入(inject)。另外,阅读有关如何 prevent SQL injection in PHP 的信息.

根据以上几点和您的以下评论,解决方案如下:

客户端.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();
}
}
?>

关于javascript - 从 api.php 获取数据后使用 JQuery 进行分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39425097/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com