如何使用ajax将新页面加载到div中答案

【问题标题】：How to use ajax to load new page into div如何使用ajax将新页面加载到div中
【发布时间】：2014-01-07 21:54:45
【问题描述】：

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

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

【问题讨论】：

你第二页的网址真的是#myPage2.html
显然不可能，因为#用于将页面的URL与页面上要滚动到的锚点分开。
试试 jsFiddler.net，当你有这样的问题时，你可以在那里加载它并给我们发一个链接。这样人们就可以对其进行编辑和使用。
不抱歉，这是 mypage2.html。
你在评论中提到了一个外部域，你没有在你的问题中提到它。您是否尝试从外部域加载 myPage2.html？

标签： javascript jquery ajax

【解决方案1】：

您的问题不在于您的代码。正如您在this Plnkr 中看到的那样，它运行时没有任何问题。

.load() 函数可以简化您当前的代码，但它不能解决您的实际问题，因为它只是语法糖。

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

【讨论】：

太棒了。我试图弄清楚如何使用 Plunker。你先到了那里。嗯。我正在弄清楚为什么我找不到 myPage2。谢谢！
尝试使用浏览器的控制台窗口，它会告诉你是否在某处出错:)。

【解决方案2】：

加载网址中有一个# 符号。

还有，你为什么不使用：

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

【讨论】：

我认为编辑您的答案以包含其他人的解决方案真的很便宜。
实际上直到我完成编辑才看到其他答案
是的。我最初没有“#”，它什么也没做。当我插入一个“#”时，它删除了第 1 页，但没有显示第 2 页。我读到您不能使用 ajax 从外部域加载。不知道如何输入page2 url.....
正确，这将违反“同源策略”。在大多数情况下，您只能加载与请求资源的页面来自同一域的页面。
我将我的实际问题提炼为这个简单的练习。我正在使用 $.ajax，因为我读到 .load 在所有浏览器中都不起作用。我不能说，因为我理解其中的区别。

【解决方案3】：

从 URL 中删除 # 后，您的代码应该可以工作。这是一个稍微简洁的版本：

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

见jQuery.load()

【讨论】：

我原来没有#。什么都没做。当我在 url 前面加上一个“#”时，它隐藏了 page1。

【解决方案4】：

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

除此之外，如果你愿意，你也可以这样做：

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

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

});

【讨论】：

【解决方案5】：

<!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/

【讨论】：