写的div作为数据流 [英] Write to div as data streams in

问题描述

考虑一个AJAX调用写入到一个div：

Consider an AJAX call that writes to a div:

recent_req=$.post('result.php', { d: data }, function(returnData) {
    $('#content').html(returnData);
});

在 result.php PHP脚本执行的一些功能需要时间，约5-20秒每一步。我使用PHP的的flush（）功能尽快得到信息到浏览器的每一个步骤的开始和结束，但我怎么能得到javascript写数据到＃内容 DIV因为它进来？

The PHP script at result.php performs some functions that take time, about 5-20 seconds per step. I am using PHP's flush() function to get the info to the browser as soon as each step starts and ends, but how can I get the Javascript to write the data to the #content div as it comes in?

感谢。

编辑： 为了澄清：假设 result.php 如下所示，并且由于限制实际上不能重构：

To clarify: Assume result.php looks like the following and due to constraints cannot be practically refactored:

<?php

echo "Starting...<br />";
flush();

longOperation();
echo "Done with first long operation.<br />";
flush();

anotherLongOperation();
echo "Done with another long operation.<br />";
flush();

?>

如何可能的AJAX的结构叫 result.php 使得echo语句被附加到＃内容 DIV，因为他们进来吗？有/任何解决方案，而jQuery是值得欢迎的。谢谢！

How might the AJAX be structured to call result.php such that the echo statements are appended to the #content div as they come in? Any solution with / without jQuery is welcome. Thanks!

推荐答案

有使用，你可以用它来实现这一目标的iframe的技术。

There's a technique using an iframe which you could use to achieve this.

类似的涉及帧等建议，但它不涉及会话或轮询或任何东西，不需要你显示的iframe本身。它也有运行，你需要在流程中的任何一点的任何code，如果你正在做的事情不仅仅是推至一个div（例如，你可以更新进度条）更加复杂与你的用户界面的好处。

Similar to other suggestions involving frames but it doesn't involve sessions or polling or anything, and doesn't need you to display the iframe itself. It also has the benefit of running any code you want at any point in the process, in case you're doing something more sophisticated with your UI than just pushing text to a div (e.g. you could update a progress bar).

基本上，提交表单到隐藏的iFrame然后冲洗javascript来的框架，这与在iframe的父功能的交互。

Basically, submit the form to a hidden iFrame then flush javascript to that frame, which interacts with functions in the iFrame's parent.

这样的：

HTML：

<form target="results" action="result.php" method="post">
<!-- your form -->
<input type="submit" value="Go" />
</form>

<iframe name="results" id="results" width="0" height="0" />
<div id="progress"></div>

的Javascript，在你的主页：

function updateProgress(progress) {
  $("#progress").append("<div>" + progress + "</div>");
}

result.php：

<?php

echo "<script language='javascript'>parent.updateProgress('Starting...');</script>";
flush();

longOperation();
echo "<script language='javascript'>parent.updateProgress('Done with first long operation.');</script>";
flush();

anotherLongOperation();
echo "<script language='javascript'>parent.updateProgress('Done with another long operation.');</script>";
flush();

?>

这篇关于写的div作为数据流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！