Jquery AJAX 实时输出？

Question

我正在尝试从 AJAX 请求中获取一些实时输出。

这是我正在使用的代码：

$.ajax({ type: "GET",   
     url: "test.php?delete=students",   
     async: true,
     success : function(data) {
         console.log(data)
     }
    });

当我的网页上的链接触发时，会显示一个旋转动画以显示正在发生的事情。我还想在 div 中显示 test.php 运行时的输出。

test.php 有一个简单的循环，它遍历所有学生并将其删除，然后echo "$student removed";

当从命令行运行时，会显示删除，当通过 AJAX 运行时，我只得到动画而不是输出。

我不知道如何获得它，我已经尝试了几个插件，但都没有成功。我也尝试过使用XMLHttpRequest 和responseText，但我不确定如何正确使用它。

理想情况下，我希望每个删除都显示在 #status div 中。

任何人都可以建议如何做到这一点？

更新

 progress : function(data) {
    console.log(data);
 },

我已经添加了上面的内容并移动我在控制台中得到了一些输出。 ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 44, total: 0, type: "progress"…}

扩展我可以看到包含我所追求的数据的响应文本。 我如何得到它，以便我可以将它附加到 div ？

Answer 1

您可以尝试使用服务器发送的事件：https://html.spec.whatwg.org/multipage/comms.html#server-sent-events

客户端代码会很简单：

var sse = new EventSource('test.php?delete=students');
sse.addEventListener('message', function(e) {
  console.log(e.data);
}, false);

在您的 test.php 中，代码将如下所示：

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

for ($i = 0; $i < ob_get_level(); $i++) {//for each open buffer
  ob_end_flush();//close it
}

ob_implicit_flush(1);//turn implicit flush on

//now goes what you called "loops through all students and deletes them"
while(1) {
  /*here you post your code that deletes your student*/
  $data = "$student removed";//message to send to client confirming deleting of particular student
  echo "data: ".$data . PHP_EOL;//here you send data to client, it will receive it and handle inside 'message' event handler
  echo PHP_EOL;//need this just to fulfill the SSE standard
  sleep(1);//use if need to insert pause between sending new portion of data (better use it to keep your browser safe from too much of messages per second)
}

完成删除学生后不要忘记打破循环=)