这里不仅有一个问题

Question

我想为服务器端任务创建一个进度条（用php编写）

出于学习目的，示例和任务将非常简单。我将在客户端页面上有一个文本字段，读取number，使用ajax将其传递给php脚本并使其计算所有数字from 0 to number的总和（简化任务需要一些时间大数字，只是为了模拟一些服务器端的工作）

在.html文件中我会创建一个计时器，它会在每n秒调用一个函数，得到我的for循环所得到的索引并更新进度条。

我的问题是：
是否有可能在同一个php文件中有两个函数，如何用ajax调用一个特定的函数：一个会阻塞循环到number另一个我会调用以获取当前索引的for循环得到了。

到目前为止我的代码：

<!DOCTYPE html>
<html>
<head>
    <script>
        function myTimer()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("percentageDiv").innerHTML=xmlhttp.response;
                        alert(xmlhttp.response);
                    }
              }
            xmlhttp.open("GET","getter.php",true);
            xmlhttp.send();
        }

        function loop(){
            var loop_index = document.getElementById("loop_nr").value;
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("sumDiv").innerHTML="Total sum = " + xmlhttp.response;
                        clearInterval(myVar);
                    }
              }
            xmlhttp.open("GET","server_side.php?nr="+loop_index,true);
            xmlhttp.send();
            var myVar=setInterval(function(){myTimer()},1000);
        }
    </script>
</head>
<body>
<div id="percentageDiv"> Percentage div</div>
<div id="sumDiv"></div>
<input type="text" id="loop_nr">
<input type="submit" onclick="loop()">

</body>
</html>

server_side.php

<?php
    session_start();
    $index=$_GET["nr"];
    $progress = 0 ;
    $sum = 0 ;

    for ($i = 1; $i <= $index; $i++) {
        $sum = $sum + $i;
        $progress++;
        $_SESSION['progress'] = $progress;
    }
    echo $sum;
?>

getter.php

<?php
    session_start();
    $progress = $_SESSION['progress'];
    echo $progress;
?>

谢谢！

Answer 1

这里不仅有一个问题

你的问题是两个：

如何在PHP中对特定函数进行AJAX调用？
如何使用AJAX进行进度条？

如何对PHP中的特定函数进行AJAX调用？

您的AJAX代码很好。您在PHP中唯一需要做的就是接收此调用。

看看你的要求。您根据请求发送变量nr：

server_side.php?nr="+loop_index

这将帮助我们在php代码中确定这是一个执行sum操作的AJAX调用。现在在PHP中：

<?php session_start();

//We look at the GET php variable to see if the "nr" is coming
if(isset($_GET['nr'])) {
    //Its coming!. Now we procede to call our function to sum
    $result = sum($_GET['nr']);
}

function sum($nr) {
    $progress = 0 ;
    $sum = 0 ;
    for ($i = 1; $i <= $nr; $i++) {
       $sum = $sum + $i;
       $progress++;
       $_SESSION['progress'] = $progress;
    }
    echo $sum;
}

多数民众赞成。

如何使用AJAX进行进度条？

我们需要进行其他AJAX调用来请求PHP的进度首先，我们进行另一个AJAX调用以使用计时器检索进度！

    var timer;

    //try to delete duplications. Do a generic function that does the request to php
    function makeRequest(toPHP, callback) {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    callback(xmlhttp.response);
                }
          }
        xmlhttp.open("GET",toPHP,true);
        xmlhttp.send();
     }

     function loop() {
         var loop_index = document.getElementById("loop_nr").value;
         makeRequest("server_side.php?nr="+loop_index, function(response) {
             document.getElementById("sumDiv").innerHTML="Total sum = " + response;
             clearInterval(timer);
         });
         timer=setInterval(makeRequest("getter.php", function(response) {
             document.getElementById("percentageDiv").innerHTML=response;
          }),1000);
     }

然后在php方面，我们像之前一样检索此调用并回显$_SESSION['progress']（正如您已经拥有的那样）

<?php
    session_start();
    $progress = $_SESSION['progress'];
    echo $progress;
?>

就是这样！

Answer 2

以下是仅在服务器端使用PHP而不是javascript的PHP进度条的解决方案：

 echo "<div style=\"float:left;\">Start... </div>";
 for ($i = 0; $i<20; $i++){
    echo '<div style="float:left;background-color:red;height:20px;width:'.$i.'px"></div>';
    ob_flush();
    flush();
    usleep(100000);
 }
 echo "<div style=\"float:left\"> Done!</div>.";
 ob_end_flush();exit;

进度条AJAX和PHP

2 个答案:

这里不仅有一个问题

如何对PHP中的特定函数进行AJAX调用？

如何使用AJAX进行进度条？