php ajax请求进度条,javascript – 进度条AJAX和PHP

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

出于学习目的,示例和任务将非常简单.

我会在客户端页面上有一个文本字段,读取一个数字,用ajax将其传递给php脚本并使其计算从0到数字的所有数字的总和(简单的任务需要一些时间才能获得大数字,只需要模拟一些服务器端的工作)

在.html文件中,我将创建一个计时器,每隔n秒调用一个函数,获取我的for循环得到的索引并更新进度条.

我的问题是：

是否有可能在同一个php文件中有两个函数,如何用ajax调用一个特定的函数：一个会阻塞循环到数字,另一个我会调用来获取for循环得到的当前索引.

我到目前为止的代码：

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);

}

Percentage div

server_side.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

session_start();

$progress = $_SESSION['progress'];

echo $progress;

?>

谢谢！

解决方法:

这里不仅有一个问题

你的问题是两个：

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

>如何使用AJAX进行进度条？

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

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

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

server_side.php？nr =“loop_index

这将帮助我们在PHP代码中确定这是一个AJAX调用来执行求和操作.现在在PHP中：

//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’](正如您已经拥有的那样)

session_start();

$progress = $_SESSION['progress'];

echo $progress;

?>

就是这样！

标签：php,javascript,ajax,html

来源： https://codeday.me/bug/20190529/1175774.html