Javascript 使用AJAX在div标记中显示html页面_Javascript_Jquery_Html_Ajax_Load

Javascript 使用AJAX在div标记中显示html页面

javascript jquery html ajax

Javascript 使用AJAX在div标记中显示html页面,javascript,jquery,html,ajax,load,Javascript,Jquery,Html,Ajax,Load,我想在div1中加载一个名为Introduction.HTML的HTML页面（与x.HTML位于同一文件夹中）。但不加载。下面是x.html的代码片段 x.html $（文档）.ready（函数（）{ $（“按钮”）。单击（函数（）{ $（“#div1”）.load（“Introduction.html”）； }); }); 1.1用户您需要为这个div指定宽度和高度，以便查看我猜的一些内容 #div1 { height:200px; width:200px; } 下面是加载HTML中

我想在div1中加载一个名为Introduction.HTML的HTML页面（与x.HTML位于同一文件夹中）。但不加载。下面是x.html的代码片段

x.html


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#div1”）.load（“Introduction.html”）；
});
});
1.1用户

您需要为这个

div

指定

宽度和高度，以便查看我猜的一些内容
#div1
{
height:200px; 
width:200px;
}

下面是加载HTML中div元素中任何文件的示例代码
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>


$（文档）.ready（函数（）{
$（“#第1页”）。单击（函数（）{
$（'#result'）.load（'page1.html'）；
//警惕（“谢谢光临！”）；
}); 
});

页面1.html
<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>
      <h1>Content of page1</h1>
   </body>
</html>


页面标题
第1页内容

单击“加载页面”后，将加载page1.html的内容
<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>
      <h1>Content of page1</h1>
   </body>
</html>

希望这有帮助
 你在浏览器的JavaScript控制台中有错误吗？我猜代码中没有错误。无CORS
问题。Just#div1
没有显示内容的高度和宽度。这就是我在回答中提到的。在div上有/没有设置高度/宽度的情况下，这应该可以使用。我回答了一个问题，比如，没有使用css。正如上面所说，这两个文件在同一个文件夹中，那么路径为什么是错误的/yes@showdev，我尊重这一点。。。