如何更改文件，以便在单击"load more"按钮时浏览器动态地将数据库中的以下条目添加到列表中

如何更改文件，以便当您单击"加载更多"按钮时，浏览器会动态地从列表中的数据库中添加以下条目

索引.php

<?php
include('pdo.php');
include('item.php');
include('loadMore.php');
?>
<div id="container">
<?php foreach ($items as $item): ?>
<div class="single-item" data-id="<?= $item->id ?>">
<?= $item->show() ?>
</div>
<?php endforeach; ?>
</div>
<button id="loadMore">Загрузить ещё...</button>
<script src="/jquery-1.11.3.min.js"></script>
<script src="/script.js"></script>

项目.php

<?php
class Item
{
public $id;
public $text;
function __construct($id = null, $text = null)
{
$this->id = $id;
$this->text = $text;
}

public function show()
{
return $this->text;
}
}

加载更多.php

<?php
$offset = 0;
$limit = 10;
$statement = $pdo->prepare('SELECT * FROM credit LIMIT ?, ?');
$statement->bindValue(1, $offset, PDO::PARAM_INT);
$statement->bindValue(2, $limit, PDO::PARAM_INT);
$statement->execute();
$data = $statement->fetchAll();
$items = [];
foreach ($data as $item) 
{
$items[] = new Item($item['id'], $item['tel']);
}

PDO.php

<?php
$host = '127.0.0.1';
$db   = 'test';
$user = 'root';
$pass = '';
$charset = 'utf8';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$opt = [
PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES   => false,
];
$pdo = new PDO($dsn, $user, $pass, $opt);

脚本.js

function getMoreItems() {
var url = "/loadMore.php";
var data = {
//
};
$.ajax({
url: url,
data: data,
type: 'get',
success: function (res) {
//
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//
}
});
}

如何更改文件，以便当您单击"加载更多"按钮时，浏览器会动态地从列表中的数据库中添加以下条目

我想2个小时，我无法理解。帮助。(

我理解你的困惑，我相信你想知道为什么你的 php 代码在索引.php在使用 ajax 调用 loadMore.php 后无法正常工作。

您需要了解一个区别才能为 Web 进行开发。服务器端代码和客户端代码之间的区别。

PHP 是一种服务器端编程语言，这意味着它只在服务器上执行。您的服务器向浏览器返回 html、json、文本或任何内容，一旦响应到达浏览器，您就可以忘记 php 代码。

另一方面，Javascript是一种客户端编程语言(至少在您的情况下(它在浏览器上执行。

您基本上有两种选择：

发送回一些json并使用jQuery循环它，这是更可取的选择，但我担心它需要更多的工作。
发回 html 并将其附加到您的页面，首先创建一个名为 async 的文件.php

<?php
include('pdo.php');
include('item.php');
include('loadMore.php');
?>
<?php foreach ($items as $item): ?>
<div class="single-item" data-id="<?= $item->id ?>">
<?= $item->show() ?>
</div>
<?php endforeach; ?>

在你的JS添加到你的成功回调

$.ajax({
url: url,
data: data,
type: 'get',
success: function (res) {
$('#container').append(res);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//
}
});

不要忘记var url = "async.php";

首先，您需要使用 ajax-方法附加按钮onclick=""属性。

<button ... onclick="getMoreItems">...</button>

其次，您的加载.php需要require_once它所依赖的文件：

require_once('pdo.php');
require_once('item.php');

第三，将查询数据库的逻辑分离到 pdo.php 文件中的函数，您可以使用限制作为参数调用，即

function getData($offset = 0, $limit = 10){ 
//logic 
}

您还应该始终尝试使用require_once或include_once来确保文件不会加载多次。

现在，您可以从索引调用函数getData(...).php在容器div 加载初始数据之前，从 index.php 中删除包含到 loadmore.php然后在 loadmore 中.php编写逻辑以使用从网页发送的参数来获取下一个数据块。

ajax 中的data:...需要传递它想要获取的"页面"，也许只是关于你加载了多少次的计数器。在 loadmore 中.php脚本，您只需将页面乘以限制即可获得偏移量。

将数据作为 JSON 返回到 ajax，解析 JSON，以便您可以为每个项目构建一个新的div，然后使用 javascript 将每个div 添加到容器div 中。

我不会在这里详细介绍所有主题，但您至少会知道在谷歌上搜索哪些教程:)

相关内容

最新更新

热门标签：