首页 > 解决方案 > Ajax 和 PHP - 为什么代码可以在本地服务器上运行,但不能在主机上运行?

问题描述

我应该怎么做才能在主机上进行 ajax 工作?我尝试制作进度条。我想"echo <p>$i</p>"在迭代完成时立即显示。在本地服务器上"echo <p>$i</p>"工作并在迭代完成后立即显示 $i 。托管"echo <p>$i</p>"工作并仅在脚本执行后才显示 $i 。代码在本地服务器上工作,但不在主机上工作。我认为在托管或请求标头上设置 php 存在问题。我试图找到这个问题的解决方案,但没有找到。请帮帮我!

PHP & HTML 代码:

<?php

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

    $i = 0;

    echo "<p>$i</p>";
    flush();
    ob_flush();

    while ($i < 5) {
        $i++;
        echo "<p>$i</p>";
        flush();
        ob_flush();
        sleep(1);
    }
    exit();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Output PHP Script Progress via Ajax - Basic Example</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

</head>
<body>

<div class="container">
    <h2>Output PHP Script Progress via Ajax - Basic Example</h2>
    <p>Cick button below to run script.</p>
    <form class="" role="form" action="/basic.php" method="post">
        <button type="submit" class="btn btn-primary">Execute Long PHP Script</button>
    </form>

    <div id="progress"></div>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./dist/script-basic.min.js"></script>

</body>
</html>

带有 Ajax 的 JS 代码:

$(document).ready(function() {
    $("form").submit(function(e) {
        $.ajax({
            url: $(this).attr("action"),
            xhrFields: {
                onprogress: function(e) {
                    console.log(e.target.responseText), $("#progress").html(e.target.responseText)
                }
            },
            success: function(e) {
                console.log(e), $("#progress").html(e + "<h1>done!</h1>")
            }
        }), e.preventDefault()
    })
});

标签: phpjqueryajaxasynchronoussynchronous

解决方案


推荐阅读