如何在用户按下按钮后将进度更新从PHP推送到页面？

我在一个页面上有一系列按钮，当用户单击它们时，它们会通过jQuery

.ajax（）

触发一个PHP脚本。目前，我通过

success:function（data）{$（'#divplaceholder'）.append（data）；…}

参数将“progress updates”的串联字符串转储附加到状态占位符DIV。我的问题是，我想在执行“回显”占位符DIV时打印该占位符DIV的实时进度更新

我已经阅读了许多SSE示例、教程，进行了大量的谷歌搜索，我想我对如何从服务器发回“消息”有一个想法，但我找不到一个示例，说明如何在用户实际按下按钮时通过jQuery触发tasker.php发回更新。当前，我的

.ajax（）

调用由jQuery

.on（'click'）

事件触发

我在学习通过SSE发回更新和如何触发tasker.php的执行（在某些情况下，向其发送参数，如

.ajax（）

使我能够这样做）之间迷失和困惑

如果您能帮忙解决这个问题，我们将不胜感激

更新#2:但一旦JavaScript加载，它就会被触发；我想在单击按钮时触发执行

更新#1:以添加示例代码 （请原谅格式化，我是从移动应用程序发布的） 这是我现在如何实现它的一个抽象信息：

<? php
$output ="";
/*dummy code*/
read_csv_file();
$output.= "Opened and read file<br/>"; //Step 1
parse_csv_file();
$output.= "CSV file successfully parsed"; //Step 2
delete_from_directory();
$output.= "CSV file successfully deleted"; //Step 3
insert_data_into_db();
$output.=  "successfully inserted records into Database"; //Step 4

return $output;
?>


<div id="placeholder"></div>
<button id="button">Update</button>


//jQuery...

$('#button').on('click', function(){
.ajax({
url: 'tasker.php',
dataType: 'txt',
data:  dataVariable,
success: function (data){
$('#placeholder').append(data);
});
});

//jQuery...

更新
//jQuery。。。
$（'#按钮'）。在（'单击'，函数（）上）{
.阿贾克斯({
url:'tasker.php'，
数据类型：“txt”，
数据：dataVariable，
成功：功能（数据）{
$（'#占位符'）。追加（数据）；
});
});
//jQuery。。。

首先，在客户端：

var server = null;
$('#button').on('click', function(){
  if(server)server.close();
  server = new EventSource('tasker.php?x=123');
  server.addEventListener('message', function(e){
    process(e.data);
    if(e.data >= 100){server.close();server=null;} //6
    }, false);
  });

要点：

• 必须使用GET传递参数
• 我假设有一个

  process（）

  ，它将记录您的进度更新，并以某种方式改变web浏览器的显示
• 如果再次按下该按钮，将关闭以前的SSE连接，并启动新的SSE连接
• 6：请参见下面后端代码的

  #6

在后端，PHP伪代码：

<?php
//Process inputs here
//If using sessions close them here
$lastProgress = 0;
while(true){
  $progress = ...  //1
  if($progress == $lastProgress)continue; //2
  echo "data:$progress\n\n";  //3, 4
  @ob_flush();flush();  //5
  //if($progress >= 100)exit;  //6
  }

---

用setInterval（function（）{alert（“Hello”）；}，3000）将您的代码包装在.on（'click'）中如何；查看您的一些代码会很有用。您的意思是您已经使用
.ajax（）将其运行（即，但没有进度更新）
；那个调用看起来像什么？@DarrenCook完成了。希望能有所帮助。谢谢！不会将
$（“#占位符”）.append（）；
更改为
$（“#占位符”）。append（数据）
解决这个问题？@imvain2这是一个输入错误；事实上现在就是这样。刚刚修复了它。但这会立即转储整个字符串。我想要的是在运行时将每个步骤都完成后输出，而不是等到“返回”。太好了！我会尝试一下。关于第3点，我正在考虑像“已完成解析”、“插入数据库”、“已完成执行”等，而不是百分比的数字。此外，我不确定我是否理解您所说的“如果使用会话在此处关闭它们”的意思“。我有一个登录系统，而且我有会话变量；如果你是这个意思，那就不会发生什么。谢谢你的帮助！更新：谢谢你花时间回答我的问题。我还没有机会尝试实现它。我会通知你的。”。