如何在 html 索引中引用两个使用 jquery 的 HTML 文件？

Question

我正在尝试为两个使用 jquery 的 HTML 文件创建一个索引页。 以下是文件的细分：

Emps1,Emps2：两个带有空表的 HTML 表
TabA_stats,TabB_stats ：每个 HTML 文件的独立 js 文件，用于使用 .csv 文件中的数据填充表格
Tab_A_4-1-2014,Tab_B_4-1-2014 : 两个 HTML 文件，使用空表格 HTML 文件和 JS 制作一个填充表格
CSV_A_4-1-2014,CSV_B_4-1-2014 : 两个包含数据的 CSV 文件
索引：这是我试图同时引用Tab1、Tab2 的地方

因此，我尝试在Index 中同时引用Tab_A_4-1-2014 和 Tab_B_4-1-2014 ，因此当我单击链接时， Tab_A_4-1-2014 或 Tab_B_4-1-2014将在同一页面上运行。

因此，基本上，javascript 会查看 HTML 表的名称（ Tab_A_04-01-2014 和 Tab_B_04-01-2014 ）并查找具有相应日期的 CSV 文件以使用数据（ CSV_A_4-1-2014 ， CSV_B_4-1-2014 )

我的问题是这两个表不会填充，当我调试时，我认为问题是 JS 尝试获取文件名时：

TabA_stats （只是我认为有问题的标题：

var path_data = location.pathname.split("_");
var date_info = path_data[2].split(".");
var log_date = date_info[0];
$("#logdate").text(log_date);

所以意思是，js 文件看到文件名只是 index.html，并且找不到 csv 来填充它。

我该如何解决这个问题？ 请尽可能多地解释，因为我只有一周的时间接触 JS 和 Jquery

编辑：

Tab1_4-1-2014 （现在我只使用第一个表）：

<html>
    <head>
     <script type="text/javascript" src="jquery-latest.js"></script>
     <link rel="stylesheet" type="text/css" href="tab1_style.css">
    </head>

    <body>

      <div id="tabA_stats_div">       
      </div>

      <script>    
       //load HTML layout, tables into div "ess_stats_div" 
       $('#tabA_stats_div').load("tabA_stats.html");

       //load js file "tabA_stats.js" and execute
       $.getScript('tabA_stats.js');           
      </script>

    </body>

</html>

索引（我只有tab1）到目前为止：

    <head>
     <script type="text/javascript" src="jquery-latest.js"></script>
     <link rel="stylesheet" type="text/css" href="ess_style.css">
    </head>

    <body>

      <div id="topBar">
    <a href ="#" id="load_home"> Tab1 </a>
</div>
<div id ="content">        
</div>

<script>
    $(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("Tab_A_04-01-2014.html");
    });
});
</script>

    </body>

</html>

Answer 1

Javascript 是零索引的。 因此，如果您要查找第一个下划线之后的部分，则需要

var date_info = path_data[1].split(".");

代替

var date_info = path_data[2].split(".");

Answer 2

您正在经历的行为是预期的； JavaScript location对象包含有关当前 URL 的信息（请参阅此处）。 因此，如果此脚本（声称是 TabA_stats 的一部分）在根目录中的index.html上运行，则location.pathname将准确返回（ index.html ），假设它在服务器上运行而不是在本地查看目录路径将包含在后一种情况下。

现在，让我们谈谈浏览器的实际工作方式。 当您访问您的主页 ( index.html ) 时，您的浏览器会向您的服务器发送对文件index.html的请求。 当 HTML 文件被发送回您的浏览器时，它开始通读它，挑选出它没有的部分（即 JavaScript 文件、图像等）并构建对这些项目的请求，并将其发送回你的服务器。 您的浏览器还会呈现它可以处理的内容，并在剩余资源到达时加载它们（这个确切的过程因浏览器而异，但总体思路是相同的）。

让我们就此打住； 你现在有什么？ 您拥有完全加载的DOM或文档对象模型。 从本质上讲，这本质上是页面上所有 HTML 元素的树。 有没有运行过任何 JavaScript 代码？ 大概; 但是通过使用类似$(document).ready(); 我们可以推迟我们的 jQuery 代码（最常访问/操作 DOM）在 DOM 完全加载后运行。 请记住，JavaScript 是语言； jQuery 只是 JS 上的一个库或扩展。

除了我在第一段中概述的问题之外，您对帖子的编辑让我清楚地知道您有太多的分离层。 几乎感觉就像您正在尝试将面向对象的实践应用于 Web 开发。 让我们摒弃每个表都是一个单独的“对象”的想法，因此它必须有自己的 HTML 文件。 相反，让我们将所有内容编译到尽可能少的资源中，以便尽可能快地为您的用户加载。

您可以将您的结构减少到 1 个 HTML 文件和 1 个 JS 文件（我假设您的 CSV 文件是从某个地方转储的并且可能会发生变化，因此我们将不理会它们）。 您的index.html文件应该包含两个选项卡，每个选项卡都包含每个表所需的 HTML 元素。 除非有物理上无法随请求发送的动态数据（在您的情况下，您的 CSV 文件），否则所有内容都应在index.html定义为 HTML。 因此，我们可以让 jQuery 的 AJAX 功能在加载 DOM 后从 CSV 文件加载数据。

简而言之：在继续之前，您有很多阅读要做。 我建议你不要继续你目前的结构和思考这个项目的方式。 从 1 个 HTML 文件和 1 个 JS 文件开始； 在使用 JS 加载动态数据之前，尽可能多地使用静态 HTML。 一旦你有了概念，就发布一个特定的问题，你就可以开始了！

如何在 html 索引中引用两个使用 jquery 的 HTML 文件？

问题描述

2 个解决方案

解决方案1
0 2014-04-01 14:42:46

解决方案2
-1 2014-04-01 14:48:38

如何在 html 索引中引用两个使用 jquery 的 HTML 文件？

问题描述

2 个解决方案

解决方案1 0 2014-04-01 14:42:46

解决方案2 -1 2014-04-01 14:48:38

解决方案1
0 2014-04-01 14:42:46

解决方案2
-1 2014-04-01 14:48:38