使用JavaScript和jQuery从外部文件填充div

Question

非常沮丧。无法使代码正常工作，也不知道为什么。 我正在尝试使用另一个 HTML 文件中的 div 来填充我的 div。以下是我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<div id="text">
content goes here
</div>

<script type="text/javascript">
    function whenButtonClicked() {
        var book = document.getElementById("book").value; //this is working
        var chapter = document.getElementById("chapter").value; //this is working
        var filename = 'files/' + book + chapter + '.html'; //this is working
        $('#text').load(filename #source); //this is NOT
    }

</script>

感谢您的任何帮助。

亚当

编辑：这里是我正在处理的链接实际文件。它可能也有问题。

- preahkumpii

---

你能否警告文件名并验证文件是否存在？这可能是文件路径的问题。 - Chetter Hummin

@mrtsherman 我认为操作者正在尝试仅加载具有'id'为'source'的指定HTML部分。 - Chetter Hummin

@AmitBhargava - 谢谢，我不知道load可以这样做！看起来他的语法仍然有误。 - mrtsherman

尝试按照这里的信息操作。我确定文件存在，就在我使用的文件旁边。 - preahkumpii

@preahkumpii 希望 'files' 文件夹在正确的位置。我自己也不确定正确的绝对位置。请发布 'files' 文件夹的绝对路径。也许这将帮助我们找到问题所在。 - Chetter Hummin

目前，我所做的一切都在我的本地机器上。文件夹与我正在工作的文件旁边。其中包含书籍和章节的所有单独文件。 - preahkumpii

Answer 1

使用此代码：$('#text').load(filename + " #source");。

- Daniil Ryzhkov

---

＃source（根据this）是其他HTML文件中div的id。我尝试过只用“filename”，以及实际文件名（应该是动态的，因此使用变量）。但都没有起作用。 - preahkumpii

谢谢。Jsfiddle似乎无法与我尝试的几乎任何其他链接一起使用。 - preahkumpii

@preahkumpii，好的。请谷歌“Access-Control-Allow-Origin”。 - Daniil Ryzhkov

好的，显然有很多问题，其中一个主要问题是我没有在浏览器中进行硬刷新。现在一切都很好，它会很好地显示来自其他HTML文件的信息。但是，当我使用“filename”变量时，它不起作用。这个项目的整个重点是基于动态选择进行查找。因此，我认为输入变量是问题所在。 - preahkumpii

我真是太蠢了，没有看到问题所在。问题不在于 $.load() 不能使用变量，它是可以的。在定义变量的那一行中，我忘记在字符串中放入正确的引号，以使其可读取到 $.load() 中。因此，这是正确的字符串：var myFile = "'files/" + book + chapter + ".html'";。感谢所有的帮助。 - preahkumpii