如何使用Ajax到新的页面加载到DIV

我的网站包含两个页面。我试图将第2页加载到第1页的div中，然后显示第2页onclick。我试图使用下面的代码不工作。我是新手，所以我很抱歉，如果这只是愚蠢的问题。如何使用Ajax到新的页面加载到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>

来源

2014-01-07 hypermiler

是您的第二个页面的URL真的'＃myPage2.html' – tymeJV

这显然不能，因为''＃用于网页的URL从锚定在页面上分开滚动到。 – Barmar

尝试jsFiddler.net当你有这样的问题时，你可以加载它并发布一个链接。这样人们可以编辑它并使用它。 – Ljubisa

你的问题不是你的代码。正如你可以在this Plnkr中看到的，它运行没有任何问题。

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

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

来源

2014-01-07 22:17:10 Aidiakapi

太棒了。我试图弄清楚如何使用Plunker。你先到那里。嗯。我正在弄清楚为什么我找不到myPage2。谢谢！ – hypermiler

尝试使用浏览器的控制台窗口，它会告诉你它是否在某处出错:)。 – Aidiakapi

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

而且，你为什么不使用：一旦#从URL删除

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

来源

2014-01-07 21:56:25 Qiang

我认为这是真的便宜，编辑你的答案包含别人的解决方案。 – Aidiakapi

我实际上没有看到其他答案，直到我完成编辑 – Qiang

是的。我原本没有那个“＃”，它什么都没做。当我插入“＃”时，它删除了Page1但未显示page2。我读过你不能使用ajax从外部域加载。不知道如何进入第2页网址..... – hypermiler

您的代码应该工作。这里有一个稍微更简洁的版本：

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

看到jQuery.load()

来源

2014-01-07 21:57:27 Kyle

我原本没有＃。没有做任何事情。当我在网址前加上“＃”时，它隐藏了page1。 – hypermiler

在＃myPage2.html的＃符号可能是你错误的原因。

从

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

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

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

});

来源

2014-01-07 21:58:03

如何使用Ajax到新的页面加载到DIV

回答

相关问题