在使用ajax将PHP文件加载到DIV之前显示加载器,可以通过以下步骤实现:
beforeSend
回调函数,在发送ajax请求之前执行相关操作。$.ajax
)发送请求到服务器的PHP文件。可以通过设置dataType
参数为html
来指定返回的数据类型为HTML。success
回调函数获取服务器返回的HTML数据,并将其插入到指定的DIV中。可以使用jQuery的html()
方法将返回的HTML代码插入到DIV中。complete
回调函数,在ajax请求完成后执行相关操作。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
/* 加载器样式 */
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="content"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 显示加载器
function showLoader() {
$('#content').html('<div class="loader"></div>');
}
// 隐藏加载器
function hideLoader() {
$('.loader').remove();
}
// 发送ajax请求
function loadPHPFile() {
$.ajax({
url: 'path/to/your/php/file.php',
type: 'GET',
dataType: 'html',
beforeSend: function() {
showLoader();
},
success: function(response) {
$('#content').html(response);
},
complete: function() {
hideLoader();
}
});
}
// 调用加载PHP文件的函数
loadPHPFile();
</script>
</body>
</html>
在上述示例代码中,我们通过CSS创建了一个加载器样式,并使用JavaScript和jQuery来实现加载器的显示和隐藏。在loadPHPFile()
函数中,我们使用ajax发送GET请求到服务器的PHP文件,并在请求开始前显示加载器,在请求成功后将返回的HTML插入到指定的DIV中,并在请求完成后隐藏加载器。
这是一个基本的实现方法,你可以根据具体需求和设计来自定义加载器的样式和动画效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax做分页</title>
<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="Ajax_pag.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
</head>
<style>
.header{
margin-top: 20px;
}
</style>
<body>
先添加按钮: MORE 然后在JS中定义初始页和每页显示数量并进行Ajax请求: var currentPage = 1; var perPage = 4; function loadMore() { $.ajax({ //请求方式 type: 'get',
领取专属 10元无门槛券
手把手带您无忧上云