小编典典

进度栏AJAX和PHP

ajax

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

出于学习目的，示例和任务将非常简单。我将在客户端页面上有一个文本字段，读取a
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;
?>

谢谢！

阅读 215

2020-07-26

共1个答案

小编典典

这里不仅有一个问题

您的问题将是两个：

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

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

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

看看你的要求。您nr随请求发送一个变量：

server_side.php?nr="+loop_index

这将帮助我们在php代码中确定这是进行求和操作的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;
?>

就是这样！

2020-07-26