如何使用Ajax将新页面加载到div中

Question

如何使用Ajax将新页面加载到div中

5

我的网站由两个页面组成。我想将第二个页面加载到第一个页面的div中，然后在单击时显示第二个页面。我正在尝试使用以下代码，但它不起作用。作为新手，如果这只是一个愚蠢的问题，请原谅我。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url:"myPage2.html",success:function(result){
      $("#div1").html(result);
    }});
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

</body>
</html>

- hypermiler

你的第二个页面的URL真的是#myPage2.html吗？ - tymeJV

显然不可能，因为“＃”用于将页面的URL与页面上要滚动到的锚点分开。 - Barmar

不好意思，这是我的 mypage2.html 页面。 - hypermiler

1

你在评论中提到了一个外部域名，但是在你的问题中没有提到。你是想从外部域名加载myPage2.html吗？ - Aidiakapi

页面1和页面2在同一个域上。我没有使用jsFiddle，因为我认为它不允许我使用两个不同的URL。 - hypermiler

显示剩余2条评论

5个回答

3

您的加载URL中有一个#符号。

另外，为什么不使用：

$("#div1").load("myPage2.html");

- Qiang

2

我认为把别人的解决方案添加到你的答案中，然后进行编辑是非常不专业的。 - Aidiakapi

2

直到我编辑完了，我才看到其他答案。 - Qiang

是的。我最初没有在那里加“#”，什么也没发生。当我插入“#”时，它擦除了Page1，但没有显示page2。我读到你不能使用ajax从外部域加载。不确定如何输入page2的url..... - hypermiler

1

正确，这将违反“同源策略”。在大多数情况下，只有当页面来源与请求资源的页面相同时，才能加载页面。 - Josh Beam

我将我的实际问题简化为这个简单的练习。我正在使用$.ajax，因为我读到.load在所有浏览器中都不起作用。虽然我不能说我理解它们之间的区别。 - hypermiler

@user1704787 jQuery是一个专门设计用来解决浏览器差异的框架，如果它的API不能跨浏览器工作，那么它的目的就完全失败了。.load()发起一个AJAX调用，就像$.ajax一样，它们都受到相同的跨域策略限制，但除此之外，在任何地方都可以正常工作。 - Aidiakapi

3

一旦从URL中移除#，你的代码应该可以正常工作。以下是更加简洁的版本：

$("button").click(function(){
  $("#div1").load("myPage2.html");
});

请参见jQuery.load()

- Kyle

我最初没有加上 #。什么也没做。当我在网址前面加上 # 时，它隐藏了 page1。 - hypermiler

1

#符号在#myPage2.html中可能是您的错误原因。

除此之外，如果您愿意，还可以执行以下操作：

$('button').click(function() {

    $('#div1').load('myPage2.html');

});

- Josh Beam

0

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
  $("a#button").click(function(e){
  $('#div1').load('myPage2.html');
  e.preventDefault;
});
});
</script>
</head>
<body>

<!--This is the targeted div -->
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button><a id="button" href='javascript:;'>Get External Content</a></button>
</body>
</html>

针对锚点进行定位比使用 div 来促进操作更好，使用 alert 来测试函数，因为无法访问 page2.html，但是 CORS 策略规定文件应该托管在同一服务器上。在 jsfiddle 中使用 jQuery edge 进行测试，所以现在仍然应该可以正常工作，请稍后确认是否能够将 page2.html 加载到 div 中。

jsfiddle 链接：https://jsfiddle.net/0rad93bo/

- Jean G.T

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aidiakapi · Accepted Answer

你的问题不在于代码。如此Plnkr所示，它可以无任何问题地运行。

.load（）函数可以简化您当前的代码，但它不会解决您真正的问题，因为它只是语法糖。

由于某种原因，您的浏览器无法定位myPage2.html，因此无法正确显示它。