使用jquery動態加載div頁面中的html頁面

-2

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

但它不工作..

來源

2013-03-10 Hari

你的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'); 
    }); 
});

來源

2013-03-10 07:19:44 Amrendra

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

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

來源

2013-03-10 07:20:10

試試這個：

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

替換page.html您的網頁

來源

2013-03-10 07:20:16

試試這個並回復... – 2013-03-10 07:24:09

沒有迴應..有其他方法。？ – Hari 2013-03-10 07:38:09

試試這個..

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

來源

2013-03-10 07:20:28 Purus

提供$ 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。

最後，腳本標籤進入頭部或身體..不是都不。

來源

2013-03-10 07:29:57 Daedalus

@ 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>

來源

2013-03-12 13:33:52 Hari

使用jquery動態加載div頁面中的html頁面

回答

相關問題