jquery批量执行任务实时返回状态-Toy模板网

这篇具有很好参考价值的文章主要介绍了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="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>

PHP后端处理脚本 (process_tasks.php)：

在与HTML文件相同的目录下创建一个名为 process_tasks.php 的文件，用于处理批量任务的后端逻辑：文章来源地址https://www.toymoban.com/news/detail-801037.html

<?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';
}
?>

到了这里，关于jquery批量执行任务实时返回状态的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！