php 动态更新进度条数据

wkyowqbh 于 2023-02-07 发布在 PHP

关注(0)|答案(1)|浏览(147)

我正在创建一个类似于Trello工具的带有一组复选框的列表，数据是从MySql数据库中提取的。
当用户选中其中一个复选框将活动标记为已完成时，我使用XMLHttpRequest请求异步调用php路由，并在数据库中将任务状态编辑为"已完成"（从而避免页面刷新）。
此外，我还有一个引导进度条，它根据状态"已完成"、"待处理"和"总计"来计算表中的行数，我使用这些数据来动态填充进度条。
然而，这个栏只在我进入页面或刷新它时更新，我希望它与XMLHttpRequest请求一起更新，XMLHttpRequest请求在每次复选框发生任何更改时触发。
我的问题是：有没有办法根据XMLHttpRequest请求填写进度条信息？

//CODE RESPONSIBLE FOR MAKING THE ASYNCHRONOUS REQUEST TO EDIT THE STATUS OF THE CHECKBOX IN THE DATABASE

function checkRealizado(url) {

  let checkRealizado = new XMLHttpRequest();

  checkRealizado.open('POST', url)

  checkRealizado.onreadystatechange = () => {

      if(checkRealizado.readyState == 4 && checkRealizado.status == 200) {

      }

  }

  checkRealizado.send()

}

//CHECKBOX RESPONSIBLE FOR ACTIVATING THE XMLHTTPREQUEST FUNCTION

<label class="marcarConcluido" id="marcarConcluido" for="chkPassport">

   <input onclick="checkRealizado('/tarefa?acao=checkRealizado&id='+<?= $checklist->id //DATA EXTRACTED FROM THE DATABASE, ALL OK HERE ?>)"  class="form-check-input" id="chkPassport" style="margin-right: 8px" type="checkbox">

   <?= $checklist->checklist //DATA EXTRACTED FROM THE DATABASE, ALL OK HERE ?>

</label>

//HTML CODE OF MY PROGRESS BAR

<div id="progressBar" class="progress text-muted" style="height: 6px;" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="<?= $this->view->getLinhasCheck ?>">

  <progress class="text-muted progress-bar w-100" style="background-color: #fff; height: 6px;" value="<?= $this->view->getLinhasCheckRealizada ?>" max="<?= $this->view->getLinhasCheck ?>"></progress>

</div>

/// $this->view->getLinhasCheckRealizada This variable is responsible for filling in the data according to the number of rows in the database table, everything working so far

// $this->view->getLinhasCheck This variable is responsible for filling in the data according to the number of rows in the database table, everything working so

php

来源：https://stackoverflow.com/questions/75341203/update-progress-bar-data-dynamically

1条答案

按热度按时间

relj7zay1#

把你的问题分解成几个部分。

第一部分？我们如何设置进度条的宽度？The Bootstrap docs显示这很容易-只需设置一个百分比内联，如style="width: 25%"。
下一部分：我们如何得到这个百分比？你提到你已经在后端计算了，取决于完成的行数等等。好的，你的PHP代码已经有了这个。
我们如何将该值发送到前端？您必须在XMLHttpRequest的响应中返回它，对吗？那么我们如何在XMLHttpRequest中返回和使用数据呢？快速搜索一下，我们可以看到许多关于SO，here's one的示例：我们可以直接使用this.responseText。
当我们有了新的百分比值后，我们如何动态更新进度条呢？同样，搜索这里会出现很多例子，here's one：

document.getElementsByClassName('progress-bar').item(0)
  .setAttribute('style', 'width:' + Number(percent) + '%');

所以把这些都放在一起。

您的Javascript

function checkRealizado(url) {
    let checkRealizado = new XMLHttpRequest();
    checkRealizado.open('POST', url)
    checkRealizado.onreadystatechange = () => {
        if(checkRealizado.readyState == 4 && checkRealizado.status == 200) {
            // Response to your request is the percentage
            let percentage = this.responseText;

            // Update the progress bar
            document.getElementsByClassName('progress-bar').item(0)
                .setAttribute('style', 'width:' + Number(percentage) + '%');
            document.getElementsByClassName('progress-bar').item(0)
                .setAttribute('aria-valuenow', percentage);

        }
  }    
  checkRealizado.send()    
}

您的PHP

// ... your code which updates rows, and calculates percentage
// You just want to echo the result so the XMLHttpRequest gets the
// result.  So last thing you do, assuming success is:
echo $percentage;

注解

您可能需要考虑从请求中返回JSON，这样您就可以包含更多的内容，而不仅仅是百分比-可能类似于：

{
    "status": "OK",
    "message": "",
    "percentage": 42
}

例如，如果请求失败，您可能希望返回/显示一条错误消息。目前，如果发生这种情况，代码将尝试使用该错误消息作为百分比，这是行不通的。一些搜索在这里找到了大量关于如何使用JSON与XMLHttpRequest的答案，例如：Parsing JSON from XmlHttpRequest.responseJSON

您可能希望使用fetch()来代替XMLHttpRequest：Fetch API vs XMLHttpRequest

赞(0）回复(0）举报 2023-02-07

我来回答

php 动态更新进度条数据

1条答案

您的Javascript

您的PHP

注解

相关问题

热门标签

最新问答