Question

我的网页中有一张卡片，可以读取Automation Data并将其显示在页面的卡片中。除了自动化测试摘要的URL，我将读取所有需要的数据。

这是我的代码：

function Cox() {
    jQuery.ajax({
        method: "POST",
        dataType: "JSON",
        url: "http://localhost:8080/sanityTestDataCox.php",
        success: function(data) {
            console.log(data);
            var total = data[0];
            var passed = data[1];
            var failed = data[2];
            var time = data[3];
            var url = data[4];
            document.getElementById('coxTotal').innerHTML = "Total tests: " + total;
            document.getElementById('coxFailed').innerHTML = "Failed tests: " + failed;
            document.getElementById('coxPassed').innerHTML = "Passed tests: " + passed;
            document.getElementById('coxRunTime').innerHTML = "Run Time: " + time;
            document.getElementById('coxUrl').innerHTML = "url " + url;
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
<div class="card text-white bg-primary o-hidden h-100">
    <a class="card-header text-white clearfix small z-1" href="#">
        <span class="float-left">COX Sanity Run </span>
    </a>
    <div class="card-body">
        <div class="card-body-icon">
            <i class="fa fa-fw fa-tasks"></i>
        </div>
        <div id="coxTotal" class="mr-5">
            <script type="text/javascript">
                Cox();
            </script>
        </div>
        <div id="coxFailed" class="mr-5">
            <script type="text/javascript">
            Cox();
            </script>
        </div>
        <div id="coxPassed" class="mr-5">
            <script type="text/javascript">
                Cox();
            </script>
        </div>
        <div id="coxRunTime" class="mr-5">
            <script type="text/javascript">
            Cox();
            </script>
        </div>
    </div>

    <a class="card-footer text-white clearfix small z-1" href="#">
        <span class="float-left">View Details</span>
        <span class="float-right">
            <i class="fa fa-angle-right"></i>
        </span>
    </a>
</div>

当我尝试像其他4个变量一样将URL加载到HMTL中时，它似乎无法正常工作。有什么想法吗？

更新：

感谢您提供有关如何清理代码的有用评论。我加入了它，它使它变得更加干净。我还发现以下帖子为我的问题提供了解决方案。谢谢

document.getElementById to include href

Answer 1

您将收到错误消息“ 未捕获的ReferenceError：未定义Cox ”，因为在定义它之前，您正在调用“ Cox（）”函数。 DOM将逐行处理，在此期间，该功能不存在。

我更改了您的代码，并在下面提到。它会按预期工作。：）

定义后，我称为“ Cox（）”函数。您可以在定义后随时随地更改位置。

mail@thomas.müller.de

Answer 2

您仅应调用Cox()一次：页面加载时，无论如何它以所有div为目标。另外，Cox()是未定义的，因为您在定义它之前先调用它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
function Cox() {
     jQuery.ajax({
     method: "POST",
     dataType: "JSON",
     url: "http://localhost:8080/sanityTestDataCox.php",
     success: function(data) {
      console.log(data);
      var total = data[0];
      var passed = data[1];
      var failed = data[2];
      var time = data[3];
      var url = data[4];
      document.getElementById('coxTotal').innerHTML = "Total tests: " + total;
      document.getElementById('coxFailed').innerHTML = "Failed tests: " + failed;
      document.getElementById('coxPassed').innerHTML = "Passed tests: " + passed;
      document.getElementById('coxRunTime').innerHTML = "Run Time: " + time;
      document.getElementById('coxUrl').innerHTML = "url " + url;
    }
    });
    }
    window.onload = function(){
      Cox();
    }
</script>
<div class="card text-white bg-primary o-hidden h-100">
  <a class="card-header text-white clearfix small z-1" href="#">
    <span class="float-left">COX Sanity Run </span>
  </a>
  <div class="card-body">
    <div class="card-body-icon">
      <i class="fa fa-fw fa-tasks"></i>
    </div>
    <div id="coxTotal" class="mr-5">
    </div>
    <div id="coxFailed" class="mr-5">
    </div>
    <div id="coxPassed" class="mr-5">
    </div>
    <div id="coxRunTime" class="mr-5">
    </div>
  </div>

  <a class="card-footer text-white clearfix small z-1" href="#">
    <span class="float-left">View Details</span>
    <span class="float-right">
      <i class="fa fa-angle-right"></i>
    </span>
  </a>
</div>

将URL从Javascript变量读取为HTML

2 个答案: