我的网站由两个页面组成。我正在尝试将第 2 页加载到第 1 页上的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>
你的问题不在于你的代码。正如您在此 Plnkr 中看到的那样,它运行没有任何问题。
.load()
函数可以简化您当前的代码,但它不会解决您的实际问题,因为它只是语法糖。
由于某种原因,您的浏览器无法找到myPage2.html
,因此无法正确显示它。
加载 url 中有一个#
符号。
另外,你为什么不使用:
$("#div1").load("myPage2.html");
从 URL 中删除#
后,您的代码应该可以工作。这是一个稍微简洁的版本:
$("button").click(function(){
$("#div1").load("myPage2.html");
});
参见 jQuery.load()
#myPage2.html 中的 # 符号可能是导致错误的原因。
除此之外,如果你愿意,你还可以做:
$('button').click(function() {
$('#div1').load('myPage2.html');
});
<!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 策略规定文件应托管在同一台服务器上。使用 jQuery edge 在 jsfiddle 中进行测试,所以它现在应该仍然可以工作,您稍后能否确认它是否能够将 page2.html 加载到div 中?
链接到jsfiddle:https://jsfiddle.net/0rad93bo/