将 Javascript 变量中的 URL 读入 HTML答案

【问题标题】：Read URL From Javascript variable into HTML将 Javascript 变量中的 URL 读入 HTML
【发布时间】：2018-07-10 16:47:53
【问题描述】：

我的网页中有一张卡片，它读取自动化数据并将其显示在页面的卡片中。我将读取所有需要的数据，除了自动化测试摘要的 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>

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

更新：

感谢 cmets 帮助我清理我的代码。我已经添加了它，它使它变得更干净了。我还发现以下帖子为我的问题提供了解决方案。谢谢

document.getElementById to include href

【问题讨论】：

将Cox(); 像这样放在您的 HTML 中不会调用该函数。至于 URL，我看不到带有 id="coxUrl" 的元素。
您不需要尝试为每个 div 调用 Cox，实际上如果您这样做，您只是在每次调用结束时覆盖 div。

标签： javascript html

【解决方案1】：

您将收到错误消息“Uncaught ReferenceError: Cox is not defined”，因为您在定义之前调用了“Cox()”函数。 DOM 会逐行处理，在这期间，函数不存在。

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

我在定义后调用了“Cox()”函数。您可以在任何地方更改位置，但在定义之后。

<html>
	<body>
		<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> 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script type="text/javascript">
		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;
			}
			});
		}
		Cox();
	</script>
</body>
</html>

【讨论】：

【解决方案2】：

您应该只调用一次Cox()：当页面加载时，它仍然以所有divs 为目标。另外，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>

【讨论】：