javascript 使用jquery动态加载div标签中的html页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15319887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
load html page in div tag using jquery dynamically
提问by Hari
Dynamically load the html page inside div tag using JavaScript or jQuery.
使用 JavaScript 或 jQuery 动态加载 div 标签内的 html 页面。
<html>
<head>
<title>Untitled Document</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
$('#btn').click(function(){
$('#div_content').html('C:/xampp/htdocs/ex1.html');
});
});
</script>
<body>
<input type="button" id="btn" value="Load" />
<div id="d_content">
</div>
</body>
</html>
But it not working..
但它不起作用..
回答by Daedalus
The problem you are experiencing is the fact that the javascript is treating page.htmlas an object, accessing the property html. What you need to do is quotethe string, so it is treated how it was intended.. as a string:
您遇到的问题是 JavaScriptpage.html将对象视为对象，访问属性html。你需要做的是引用字符串，所以它被视为它的意图......作为一个字符串：
$('#div_content').load('page.html');
Update 1:
更新 1：
First of all, what you have above is called jQuery. jQuery is a javascript library, which you must include in your head tag before you can use any of the jquery object's methods:
首先，您上面的内容称为jQuery。jQuery 是一个 javascript 库，您必须将其包含在 head 标记中，然后才能使用任何 jquery 对象的方法：
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
You must include the above line in your document head, to gain access to the methods and properties of the jQuery $object.
您必须在文档头中包含以上行，才能访问 jQuery$对象的方法和属性。
The fact that you are not currently doing so is why your code is broken and refuses to work. Also, depending on your setup, you may wish to serve the jquery file yourself, in which case you would download it and put it somewhere on your server.
您目前没有这样做的事实是您的代码被破坏并拒绝工作的原因。此外，根据您的设置，您可能希望自己提供 jquery 文件，在这种情况下，您可以下载它并将其放在服务器上的某个位置。
Secondly, C:\is not your web root. localhostis, so to get that bit to work you would have to use the url of 'ex1.html'. That's it. Since your document is already in the web root(or at least I think it is), it should have access to any adjacent files... else..
其次，C:\不是你的网络根。 localhost是的，所以为了让那一点工作，你必须使用“ex1.html”的网址。而已。由于您的文档已经在网络根目录中（或者至少我认为它是），它应该可以访问任何相邻的文件......否则......
Say your index file is in htdocs. Your index's url would then be localhost/index.ext(with ext being whatever file extension you used). And then ex1.htmlwas in a different folder, say 'folder1'. To access it correctly in your jquery code.. folder1/ex1.html.
假设您的索引文件在 htdocs 中。您的索引的 url 将是localhost/index.ext（ext 是您使用的任何文件扩展名）。然后ex1.html在另一个文件夹中，比如“文件夹 1”。要正确地访问它在你的jQuery代码.. folder1/ex1.html。
Finally, script tags go in either the head or the body.. not neither.
最后，脚本标签要么进入头部，要么进入主体……两者都不是。
回答by Amrendra
$(document).ready(function(){
$('#btn').click(function(){
$('#div_content').load('html.page');
});
});
回答by Juan Gonzales
$('#div_content').load("page.html");
回答by Hari krishnan
Try this:
试试这个：
$(document).ready(function(){
$('#btn').click(function(){
$.get('page.html').success(function(data)
{
$('#div_content').html(data);
});
});
});
Replace page.htmlwith your page
替换page.html为您的页面
回答by Purus
Try this..
试试这个..
$(document).ready(function(){
$('#btn').click(function(){
$('#div_content').html('page.html');
});
});
回答by Hari
main.html
主文件
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
</head>
<script>
function check(){
$('#tar').load('test.html #target'); // here 'test.html' is a page and 'target' id a id of 'test.html'
}
</script>
<body>
<input type="button" id="btn" value="Go" onclick="check();"/>
<div id="tar">
</div>
</body>
</html>
test.html
测试.html
<html>
<head></head>
<body>
<div id='target'>
I am from test page.
</div>
</body>
</html>
Here i wrote 2 html programs. The problem was occurred on function only. i corrected that & now its working perfectly. We can load txt file also: Example:
在这里我写了 2 个 html 程序。问题仅发生在功能上。我更正了这一点，现在它工作得很好。我们也可以加载 txt 文件： 示例：
function check(){
$('#tar').load('test.txt'); // here 'test.txt' is a text file
}
</script>
