📅 最后修改于: 2023-12-03 15:06:39.665000 🧑 作者: Mango
在现代web应用程序中，经常需要获取大量数据并将其呈现给用户。为了提高用户体验和应用程序性能，我们通常需要实现分页。在此过程中，ajax技术是至关重要的。我们可以使用ajax技术获得页面的特定部分，而不必加载完整页面。
在这篇文章中，我们将介绍如何使用JavaScript和ajax技术来实现代码分页。我们将使用以下技术和库：
在开始编写代码之前，我们需要安装一些软件包和库。
首先，我们需要安装Node.js和npm包管理器。您可以从以下链接下载并安装它们：
接下来，我们需要创建一个空文件夹，并在文件夹中初始化一个新的npm项目。在命令行中输入以下命令：
mkdir code-pagination-ajax
cd code-pagination-ajax
npm init -y
这将创建一个名为“code-pagination-ajax”的文件夹，并在其中初始化一个新的npm项目。
然后，我们需要安装一些npm包。在命令行中运行以下命令：
npm install express mongoose body-parser cors
这将安装以下npm包：
在此示例中，我们将使用MongoDB作为数据库。如果您尚未安装MongoDB，请从以下链接下载并安装它：
在安装MongoDB之后，我们需要创建一个名为“code-pagination-ajax”的数据库。在命令行中输入以下命令：
mongo
use code-pagination-ajax
这将创建一个名为“code-pagination-ajax”的数据库并转到它。接下来，我们需要创建一个名为“codes”的集合。在命令行中输入以下命令：
db.createCollection('codes')
这将创建一个名为“codes”的集合。
现在，我们将编写服务器代码。我们将使用Express.js和Mongoose.js来创建和操作服务器。打开您最喜欢的文本编辑器并创建一个名为“server.js”的文件。将以下代码复制并粘贴到文件中：
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());
mongoose.connect('mongodb://localhost/code-pagination-ajax', { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('MongoDB connected'))
.catch(err => console.log(err));
const codeSchema = new mongoose.Schema({
title: String,
description: String,
language: String
});
const Code = mongoose.model('Code', codeSchema);
app.get('/codes/:page', (req, res) => {
const { page } = req.params;
const limit = 10;
const skip = (page - 1) * limit;
Code.countDocuments({}, (err, count) => {
if (err) {
console.log(err);
res.status(500).send('Server error');
} else {
Code.find().skip(skip).limit(limit).sort('-_id').exec((err, codes) => {
if (err) {
console.log(err);
res.status(500).send('Server error');
} else {
res.json({ count, codes });
}
})
}
});
});
app.post('/codes', (req, res) => {
const { title, description, language } = req.body;
const newCode = new Code({ title, description, language });
newCode.save((err, code) => {
if (err) {
console.log(err);
res.status(500).send('Server error');
} else {
res.json(code);
}
});
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, console.log(`Server started on port ${PORT}`));
此代码将创建一个名为“app”的Express.js应用程序。它使用body-parser中间件来解析请求正文，并使用cors中间件来启用CORS。它还连接到名为“code-pagination-ajax”的MongoDB数据库，并定义了一个名为“Code”的模型。
该代码还定义了两个路由：
现在，我们将编写JavaScript和HTML代码来呈现分页代码。打开您最喜欢的文本编辑器并创建一个名为“index.html”的文件。将以下代码复制并粘贴到文件中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Code Pagination - Ajax</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" />
<style type="text/css">
.card-header {
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container mt-3">
<h1>Code Pagination - Ajax</h1>
<form class="form-inline my-3">
<div class="form-group mr-3">
<label for="title">Title:</label>
<input type="text" class="form-control ml-2" id="title">
</div>
<div class="form-group mr-3">
<label for="language">Language:</label>
<input type="text" class="form-control ml-2" id="language">
</div>
<button type="button" class="btn btn-success" id="add-code">Add Code</button>
</form>
<div class="row" id="codes"></div>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center mt-3" id="pagination"></ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
const apiUrl = 'http://localhost:5000';
function loadCodes(page) {
$.ajax({
url: `${apiUrl}/codes/${page}`,
success: function (data) {
const { count, codes } = data;
const totalPages = Math.ceil(count / 10);
let html = '';
codes.forEach((code) => {
html += `
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-header">${code.title}</div>
<div class="card-body">
<p class="card-text">${code.description}</p>
</div>
<div class="card-footer text-muted">
${code.language}
</div>
</div>
</div>
`;
});
$('#codes').html(html);
let paginationHtml = '';
if (totalPages > 1) {
paginationHtml += `<li class="page-item"><a class="page-link" href="#" data-page="1">First</a></li>`;
}
for (let i = 1; i <= totalPages; i++) {
if (i === page) {
paginationHtml += `<li class="page-item active"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`;
} else {
paginationHtml += `<li class="page-item"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`;
}
}
if (totalPages > 1) {
paginationHtml += `<li class="page-item"><a class="page-link" href="#" data-page="${totalPages}">Last</a></li>`;
}
$('#pagination').html(paginationHtml);
}
});
}
$(document).ready(function () {
loadCodes(1);
$('#add-code').click(function () {
const title = $('#title').val();
const description = $('#description').val();
const language = $('#language').val();
if (!title || !language) {
alert('Title and language are required!');
return;
}
$.ajax({
url: `${apiUrl}/codes`,
method: 'POST',
data: { title, description, language },
success: function (data) {
$('#title').val('');
$('#description').val('');
$('#language').val('');
alert('Code added successfully!');
loadCodes(1);
}
});
});
$('#pagination').on('click', 'a', function () {
const page = $(this).data('page');
loadCodes(page);
});
});
</script>
</body>
</html>
此代码将创建一个名为“Code Pagination - Ajax”的HTML页面，其中包含一个带有标题，描述和语言输入框的表单。它还包含一个用于呈现代码列表和页面的div元素和一个用于呈现分页链接的ul元素。
此代码还包括一个用于通过ajax将代码添加到数据库的函数和一个用于通过ajax从数据库获取代码并呈现它们的函数。它还包括一个事件监听器，以便在单击页码链接时调用loadCodes函数。
现在，我们已经准备好运行应用程序。在命令行中运行以下命令：
node server.js
这将启动服务器。现在，在浏览器中打开“http://localhost:5000”，您将看到我们刚刚创建的代码分页应用程序。
在本文中，我们介绍了如何使用JavaScript和ajax技术来实现代码分页。我们编写了服务器代码，使用Express.js和MongoDB操作数据库。我们还编写了客户端代码，使用jQuery和Bootstrap框架呈现分页代码列表和页面。该示例还演示了如何通过ajax将代码添加到数据库。
完整代码请参阅以下链接：https://github.com/zmacmanx/code-pagination-ajax