<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Batch Task Execution</title>
? ? <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<h1>Batch Task Execution</h1>
<button id="startTasks">开始任务</button>
<div id="statusContainer"></div>
<script>
$(document).ready(function() {
? ? // 当按钮被点击时触发
? ? $('#startTasks').on('click', function() {
? ? ? ? // 发起Ajax请求
// 发起Ajax请求
$.ajax({
url: 'process_tasks.php', // 替换为你的后端处理脚本路径
type: 'POST',
dataType: 'json',
success: function(response) {
// 处理后端返回的每次状态信息
for (var i = 0; i < response.status.length; i++) {
displayStatus(response.status[i]);
}
},
error: function(error) {
console.error('Ajax请求失败:', error);
}
});
// 显示状态信息
function displayStatus(status) {
$('#statusContainer').append('<p>' + status + '</p>');
}
});
</script>
</body>
</html>process_tasks.php)：在与HTML文件相同的目录下创建一个名为 process_tasks.php 的文件，用于处理批量任务的后端逻辑：
<?php
// 模拟一些耗时的任务
function performTask($taskId) {
sleep(2); // 模拟任务执行时间
return "任务 $taskId 完成";
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$tasks = array(1, 2, 3, 4, 5); // 替换为你实际的任务列表
$status = array();
foreach ($tasks as $taskId) {
$result = performTask($taskId);
$status[] = $result;
// 将状态信息即时返回给前端
echo json_encode(array('status' => $status));
ob_flush();
flush();
// 模拟一些其他处理，例如保存状态到数据库
// 这里可以添加你的其他逻辑
// 等待一段时间，模拟其他任务执行
sleep(1);
}
} else {
header('HTTP/1.1 405 Method Not Allowed');
echo 'Method Not Allowed';
}
?>