jquery批量执行任务实时返回状态

<!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="//i2.wp.com/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>

PHP后端处理脚本 (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';
}
?>