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

问题描述：

使用JavaScript或jQuery动态加载div页面中的html页面。使用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>

但它不工作..

你的Web服务器上测试这个？ – Daedalus 2013-03-10 07:51:13

我测试了。浏览器显示以下错误“Uncaught SyntaxError：Unexpected token {” – Hari 2013-03-10 08:15:34

请向我们展示您的所有代码。上面的块不是问题。 – Daedalus 2013-03-10 09:10:59

答

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

没有反应..有没有其他方法..？ – Hari 2013-03-10 07:50:02

答

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

答

试试这个：

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

替换page.html您的网页

试试这个并回复... – 2013-03-10 07:24:09

没有回应..有其他方法。？ – Hari 2013-03-10 07:38:09

答

试试这个..

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

提供$ htmlcontent存在，并包含内容..这将工作，但这不是问题的要求。 – Daedalus 2013-03-10 07:27:18

修改我的代码。希望现在好了。 – Purus 2013-03-10 07:42:48

关闭，但我恐怕仍然有一个错误。 – Daedalus 2013-03-10 07:46:22

答

您遇到的问题是javascript正在将page.html作为对象，访问属性html。你需要做的是报价的字符串，因此它被视为是如何打算。作为一个字符串：

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

更新1：

首先，你有什么上方叫做jQuery。 jQuery是一个JavaScript库，你必须在你的头标记之前，你可以使用任何的jQuery对象的方法：

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

您必须在您的文档头部上面的行，来访问的方法和jQuery的属性$对象。

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

其次，C:\不是你的web根目录。 localhost是，所以要得到这一点工作，你将不得不使用'ex1.html'的网址。而已。由于您的文档已经位于Web根目录（或者至少我认为是这样），因此它应该可以访问任何相邻的文件...否则。

说您的索引文件位于htdocs中。您的索引的网址将是localhost/index.ext（ext是您使用的任何文件扩展名）。然后ex1.html位于不同的文件夹中，比如'folder1'。要在您的jQuery代码中正确访问它.. folder1/ex1.html。

最后，脚本标签进入头部或身体..不是都不。

@ user1709672在我这样做之前，请用您当前的代码更新您的问题。 – Daedalus 2013-03-10 21:29:33

答

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> 
<head></head> 
<body> 
<div id='target'> 
I am from test page. 
</div> 
</body> 
</html>

在这里，我写了2个HTML程序。问题发生在函数上。我纠正了现在它的完美工作。我们可以加载txt文件也：例子：

function check(){ 
    $('#tar').load('test.txt'); // here 'test.txt' is a text file 
    } 
     </script>

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

相关推荐