Question

我的网站包含两个页面。我正在尝试将第2页加载到第1页的div中，然后显示第2页onclick。我正在尝试使用以下不起作用的代码。我是新手，所以如果这只是一个愚蠢的问题，我很抱歉。

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

Answer 1

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

另外，你为什么不使用：

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

Answer 2

从网址中删除#后，您的代码就可以运行了。这是一个稍微简洁的版本：

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

请参阅jQuery.load()

Answer 3

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

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

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

Answer 4

＃myPage2.html 中的＃符号可能是导致错误的原因。

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

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

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

});

Answer 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 提示操作更好的做法，使用警报来测试功能，因为访问 page2.html 时，但是 CORS 政策规定应该托管文件在同一台服务器上。用 jQuery edge 测试，在 jsfiddle 中，所以它现在应该仍然可以工作，你能否稍后确认它是否能够将 page2.html 加载到 div 中？。

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

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

5 个答案: