Question

我只知道这种进度条，但这是静态的。如何通过ajax调用使其动态化？

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
 
 <div class="progress" style="height:30px">
    <div class="progress-bar" style="width:60%;height:30px"></div>
  </div>

我想显示进度条或加载框，直到加载下一个内容或页面为止。

我有一个带有下拉菜单的HTML表。当我调用任何下拉菜单时，都会进行ajax调用，并且我将在下一页显示内容。我的内容是一个HTML表，但是该表包含大量数据，因此加载需要花费一些时间。那时我想显示进度条或任何加载框，直到新页面内容完全加载为止。

这是我的一个页面，其中有一个带下拉菜单的HTML表格

var currentlyClickedOutlet = "";
var currentlyClickedBilldate = "";
$(document).ready(function() {
  $dropdown = $("#contextMenu");
  $(".actionButton").click(function() {
    //move dropdown menu
    $(this).after($dropdown);
    //update links
    $(this).dropdown();

    currentlyClickedOutlet = $(this).attr("data-place");
    currentlyClickedBilldate = $(this).attr("data-plac");

  });
});


data = [{
    "amount": 476426,
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 92141,
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 115313,
    "billdate": "2018-09-01",
    "outlet": "KOLAR"
  },
  {
    "amount": 511153,
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115704,
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 83597,
    "billdate": "2018-09-02",
    "outlet": "KOLAR"
  },
  {
    "amount": 167421,
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 53775,
    "billdate": "2018-09-03",
    "outlet": "KOLAR"
  },
  {
    "amount": 269712,
    "billdate": "2018-09-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58850,
    "billdate": "2018-09-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 82999,
    "billdate": "2018-09-04",
    "outlet": "KOLAR"
  }
]

let formatData = function(data) {

  let billdates = [];
  let outlets = [];
  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,

  };
};



let renderTable = function(data, divId, filterdata) {
  billdates = data.billdates;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById(divId);
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "Bill_____Date";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0;
  let outletWiseTotal = {};
  th = document.createElement("th");
  th.innerHTML = "Total1";
  th.classList.add("text-center");
  headerRow.appendChild(th);

  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);
    outletWiseTotal[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
      }
    });
    grandTotal += outletWiseTotal[element];
  });


  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "Total";
  th.classList.add("text-center");

  headerRow.appendChild(th);

  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = outletWiseTotal[element];
    th.classList.add("text-right");
    headerRow.appendChild(th);
  });

  th = document.createElement("th");
  th.innerHTML = grandTotal;
  th.classList.add("text-right"); // grand total

  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");

  billdates.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);
    let total = 0;

    outlets.forEach(outlet => {
      let el = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
          el = d.amount;
        }
      });




      td = document.createElement("td");
      a = document.createElement("a");

      td.classList.add("text-right");
      td.classList.add("dropdown");
      a.classList.add("btn");
      a.classList.add("btn-secondary");
      a.classList.add("actionButton");
      a.classList.add("btn")
      a.classList.add("btn-secondary");
      a.classList.add("dropdown-toggle");
      a.classList.add("dropdown-toggle-split");


      /*  a.classList.add("text-center"); */

      a.setAttribute("data-place", outlet);
      a.setAttribute("data-plac", element);



      a.setAttribute("data-toggle", "dropdown");
      a.innerHTML = el;
      td.appendChild(a);

      row.appendChild(td);




    });


    td = document.createElement("td");
    td.innerHTML = total;
    td.classList.add("text-right");

    row.insertBefore(td, row.children[1]);
    tbody.appendChild(row);

  });

  table.appendChild(tbody);

  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData, 'tbl', '');

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<div id="tbl"></div>

<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a href="test.jsp" class="link1 dropdown-item">BillSummary</a></li>
  <li><a href="test1.jsp" class="link2 dropdown-item">Item Summary</a></li>
</ul>

我知道Bootstrap进度栏，但是如何动态地做到这一点？

我只想显示进度条或加载框，直到新页面加载完毕，或者想要实现诸如在新页面的内容完全加载之前不跳到下一页的操作。

Answer 1

对于一个容易加载的盒子，我这样做：

添加您的html

<div id="waiter"></div>

在CSS中：

#waiter {
position: fixed;
border: 12px solid #f3f3f3; /* Light grey */
border-top: 12px solid #3498db; /* Blue */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } }

并在需要时使用display css属性显示/隐藏它。

有关完整的教程，请参见this page。

Answer 2

您应该在jQuery（unload，beforeunload）上使用表单事件例如，您可以创建一个函数来显示进度对话框，如下所示：

function showProgress(){
      $('.progress').show();
}

和另一个隐藏进度对话框的功能：

function hideProgress(){
      $('.progress').hide();
}

现在绑定表单的unload，beforeunload事件，以下代码显示进度对话框，直到页面完全加载（页面加载之前和每次提交之后）：

$(window).on("unload", function () {
    showWaiting();
});

$(window).on('beforeunload', function () {
    showWaiting();

});

对于Ajax调用，在每个请求调用showWaiting();方法之前以及在Ajax完成事件调用hideProgress()之后

Answer 3

我创建了一个不显示任何内容的iframe，然后，我给每个元素添加了一个类，取消了默认行为并在iframe中加载了新页面，并在加载完成后检查了该iframe的加载事件准备好将window.location.href替换为iframe位置，然后导航器立即收费

如何显示加载或进度条，直到下一页内容完全加载？

3 个答案: