ajax实时更新,无需刷新php页面

时间:2015-02-03 14:11:48

标签: php ajax

我试图将一些数据发布到post.php,我希望结果显示在form.html中,我使用Ajax来获取php输出而无需重新加载页面,我无法和#39;弄清楚如何在php脚本完成之前刷新一些php输出。

我尝试了flush()ob_flush(),但似乎在与Ajax一起使用时它们无法正常工作。我的目标是实时更新form.html,而无需重新加载页面。

这是我试图实现的一个例子。 源代码:

form.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#myform").validate({
                submitHandler: function(form) {
                    // do other stuff for a valid form
                    $.post('post.php', $("#myform").serialize(), function(data) {
                        $('#results').html(data);
                    });
                }
            });
        });
    </script>    
</head>
<body>
    <form name="myform" id="myform" action="" method="POST">  
    <!-- The Name form field -->
        Name:
        <input type="text" name="name" id="name" size="30" value=""/>  
        <br>
    <!-- The Email form field -->
        Email:
        <input type="text" name="email" id="email" size="30" value=""/> 
        <br>
    <!-- The Submit button -->
      <input  type="submit" value="Submit"/></div>
    </form>

    <!-- Result goes here -->
    <div id="results"><div>
</body>
</html>

post.php中

<?php

for($i=0;$i<2;$i++) {
    echo "Your Name is ".$_POST['name']. "<br/>";
    echo "Your E-mail is".$_POST['email']."<br/>";
    echo "Waiting 2s <br/><br/>";
    //I want to print the above before waiting 2 seconds.
    sleep(2);// in real application this will be equivalent of some calculation that takes time.
}
?>

2 个答案:

答案 0 :(得分:1)

您的回声可能已经发送到客户端浏览器,但客户端将一直等待进一步输出,直到您的PHP脚本实际完成。您需要尽早断开客户端,例如:sleep(2)之前。试试这个:

    ignore_user_abort(true);
    // Disconnect with the client
    if (!connection_aborted()) {
        $response = 'your response';
        header('Content-Length: ' . strlen($response));
        header('Connection: close');
        echo $response;
        flush();
    }

请注意,请不要在上面的代码块之前做其他回声。您的所有输出都应该在$response,因为Content-Length必须正确计算。

答案 1 :(得分:0)

您不能简单地以多个顺序输出的形式返回单个页面请求,因为每个页面加载(可能是来自浏览器的普通HTTP请求或脚本方式的AJAX请求)是客户端要求的结果提供匹配文档的页面和服务器。它不仅仅是PHP生成和传递输出,它是满足页面请求的Web服务器,它独立于给定请求资源的性质,并且不会提供半完成的页面。


这可能是您最初想法的替代方案:AJAX风格的多步操作示例:

<强>后端: post.php中:

<?php
echo "Your Name is ".$_POST['name']. "<br/>".
     "Your E-mail is".$_POST['email']."<br/>".
     "Will now continue with calculation job ...";

// store the values inside db, create session and return content
...

-calculation.php交

<?php
// longer running script doing stuff
...
print 'Done.';

<强>前端

按如下方式修改脚本:

<script type="text/javascript">
    $(document).ready(function(){
        $("#myform").validate({
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('post.php', $("#myform").serialize(), function(data) {
                  // will return the content from post.php    
                  $('#results').html(data);

                  // now call the second process
                  $.ajax('post-calculation.php', {
                    success: function(result) {
                      $('#results').append(result);
                    }
                  });

                });
            }
        });
    });
</script>  

说明:

这应该只是一个例子而不是如何通过多步操作执行AJAX调用的良好实践。建议使用输出格式,允许脚本对调用后端脚本时可能发生的错误做出反应,即通过不返回HTML代码而是返回JSON [1]。您可能希望将先前接收的数据的某些部分存储在$ _SESSION变量中,以便在以后运行的脚本中重新使用数据,不要忘记在访问会话对象之前始终调用session_start();

[1] http://www.sitepoint.com/ajaxjquery-getjson-simple/(简单教程)