2015-02-12 8 views
-2

Я хочу загрузить HTML-страницу с именем Introduction.html (в той же папке, что и x.html) внутри div1. Но не загружается. Вот фрагмент кода для x.htmlотображение html-страницы в теге div с помощью AJAX

x.html

<!DOCTYPE html> 
 
<html> 
 
<head > 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
 
</script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("#div1").load("Introduction.html"); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 

 
<body> 
 
<div id="div1"></div> 
 

 
<button> 1.1 User</button> 
 

 
<div id="cat" > 
 
</div> 
 

 
</body> 
 
</html>

`

+0

У вас возникли ошибки в консоли JavaScript вашего браузера? – showdev

+0

Их ошибка в коде, я думаю. Нет проблемы с CORS. Просто '# div1' не имеет' height' и 'width' для отображения содержимого. Вот что я упомянул в своем ответе. – void

+1

Это должно работать с/без заданной высоты/ширины на div. Я ответил на вопрос 'like' this и no css. http://stackoverflow.com/questions/28461180/how-to-change-the-contents-of-a-div-with-a-link-click/28463561#28463561 – NewToJS

ответ

0

Вы должны дать width и height этой div для того, чтобы см. некоторый контент, который я думаю.

#div1 
{ 
height:200px; 
width:200px; 
} 
1

Ниже приведен пример кода для загрузки любого файла в элемент div в формате HTML.

Sample.html

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#page1").click(function(){ 
       $('#result').load('page1.html'); 
       //alert("Thanks for visiting!"); 
      }); 
      }); 
     </script> 
    </head> 
    <body> 
     <input type='button' value='Load Page1' id="page1"> 
     <div id="result" style="clear:both;"> 
     </div> 
    </body> 
</html> 

page1.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
    </head> 
    <body> 
     <h1>Content of page1</h1> 
    </body> 
</html> 

После нажатия кнопки загрузки страницы, она будет загружать содержимое page1.html

Надеется, что это помогает!

+0

Ничего плохого в исходном исходном коде. – NewToJS

Смежные вопросы