Javascript 使用jquery动态加载div标记中的html页面_Javascript

Javascript 使用jquery动态加载div标记中的html页面

javascript

Javascript 使用jquery动态加载div标记中的html页面,javascript,Javascript,使用JavaScript或jQuery在div标记内动态加载html页面 <html> <head> <title>Untitled Document</title> </head> <script type="text/javascript"> $(document).ready(function(){ $('#btn').click(function(){ $('#div_content').

使用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>


无标题文件
$（文档）.ready（函数（）{
$（'#btn'）。单击（函数（）{
$（'div_content'）.html（'C:/xampp/htdocs/ex1.html'）；
});
});

但是它不起作用

试试这个：

$(document).ready(function(){
    $('#btn').click(function(){   
        $('#div_content').load('html.page');
     });
});

$(document).ready(function(){
$('#btn').click(function(){
$.get('page.html').success(function(data)
 {
     $('#div_content').html(data);
 });
 });
 });

将

page.html

替换为您的页面

尝试此操作

$(document).ready(function(){
    $('#btn').click(function(){   
       $('#div_content').html('page.html');
    });
});

您遇到的问题是，javascript将

page.html

视为一个对象，访问属性

html

。您需要做的是引用字符串，以便按照预期的方式处理它。。作为字符串：

$('#div_content').load('page.html');

更新1:

首先，你上面所说的叫做。jQuery是一个javascript库，在使用jQuery对象的任何方法之前，必须将其包含在head标记中：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

您必须在文档头中包含上述行，才能访问jQuery

对象的方法和属性

您当前没有这样做，这就是您的代码被破坏并拒绝工作的原因。此外，根据您的设置，您可能希望自己提供jquery文件，在这种情况下，您可以下载它并将其放在服务器上的某个位置

其次，

C:\

不是您的web根目录

localhost

是，因此要使这一点发挥作用，您必须使用“ex1.html”的url。就这样。由于您的文档已经在web根目录中（或者至少我认为是），它应该可以访问任何相邻的文件。。。否则

假设您的索引文件在htdocs中。然后，索引的url将是

localhost/index.ext

（ext是您使用的任何文件扩展名）。然后

ex1.html

在另一个文件夹中，比如“folder1”。要在jquery代码中正确访问它<代码>文件夹1/ex1.html

最后，脚本标记进入头部或身体。。两者都不是。

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>

<html>
<head></head>
<body>
<div id='target'>
 I am from test page.
</div>
</body>
</html>


无标题文件
函数检查（）{
$（'#tar'）.load（'test.html#target'）；//这里的'test.html'是一个页面，“target”id是'test.html'的id
}

test.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>

<html>
<head></head>
<body>
<div id='target'>
 I am from test page.
</div>
</body>
</html>


我来自测试页面。

这里我写了两个html程序。该问题仅在函数上发生。我纠正了这一点&现在它工作得很好。我们还可以加载txt文件：例如：

函数检查（）{
$（'#tar'）.load（'test.txt'）；//这里的'test.txt'是一个文本文件
}

提供的$htmlcontent存在，并且包含内容。。这是可行的，但这不是问题所在。你是在web服务器上测试的吗？我测试了。。浏览器显示以下错误“Uncaught SyntaxError:意外标记{”请显示您的所有代码。您上面的代码块不是问题所在。无标题文档$（Document）.ready（funtion（）{$（'#btn'）。单击（funtion（）{$（'#div#content'）.html（'C:/xampp/htdocs/ex1.html'）；}）；请参阅下面我的答案，我已将其展开，详细说明您做错了什么。@user1709672在我这样做之前，请用您当前的代码更新您的问题。