我有一个简单的网页，其中包含以下内容 HTML :
<!doctype html>
<html>
<head>
<title>Homework 8 - Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="help.html">Help</a></li>
</ul>
</nav>
<div id="content">
<div id="page">
Suspendisse vel ante ornare, vulputate lacus et, condimentum lorem.
</div>
<aside>
<h3>Helpful Links</h3>
<ul>
<li><a href="http://google.com/">Google</a></li>
<li><a href="http://facebook.com/">Facebook</a></li>
</ul>
</aside>
</div>
</body>
</html>
以及下面的数据数组 php文件:
<?php
function random_lipsum($amount = 1, $what = 'paras', $start = 0) {
return simplexml_load_file("http://www.lipsum.com/feed/xml?amount=$amount&what=$what&start=$start")->lipsum;
}
$data = [
'home' => ['title' => 'Home page',
'content' => random_lipsum(3),
'links' => [
'http://google.com/' => 'Google',
'http://facebook.com/' => 'Facebook',
]
],
'about' => ['title' => 'About page',
'content' => random_lipsum(3),
'links' => [
'http://abv.bg/' => 'ABV.BG',
'http://dir.bg/' => 'DIR.BG',
]
],
'help' => ['title' => 'Help page',
'content' => random_lipsum(3),
'links' => [
'http://wikipedia.com/' => 'Wikipedia',
'http://stackoverflow.com/' => 'StackOverflow',
]
],
];
$page = (isset($_GET['page']) && isset($data[$_GET['page']]))?$_GET['page']:'home';
echo json_encode($data[$page]);
?>
我的任务是更改 <div id="content"> 的内容<title>页面和 <aside> 中的链接与 jQuery和AJAX单击 <nav> 中的链接并且无需重新加载页面。例如，当您单击“关于”链接时，页面的内容、标题和旁白链接应更改为 data 中的内容。 php 中的数组带有 key 的文件 about 。我尝试编写一些代码但没有任何反应。这是它(它存储在一个名为 script.js 的文件中，该文件在 <head> 文件的 HTML 中引用):
$(document).ready(function(){ //executed after the page has loaded
$('nav ul li:nth-child(2) a').on('click',
$.ajax({ //create an ajax request data.php
type: "POST",
url: "data.php",
data: 'page=about',
dataType: "html", //expect html to be returned
success: function(data){
$('#page').html(data.about.content);
$('title').html(data.about.title);
$('aside ul li:first-child a').html(data.about.links[0]);
$('aside ul li:nth-child(2) a').html(data.about.links[1]);
}
})
);
});
你能帮助我并告诉我我做错了什么吗？
最佳答案
您的 PHP 返回 JSON，而不是 HTML。使用:
dataType: "json"
您返回的唯一 HTML 位于 title 和 content 属性的值中。此外，links 元素中的 PHP 关联数组将成为 Javascript 对象，而不是数组。我建议你将其更改为索引数组:
'links' => [
[ 'url' => 'http://abv.bg/', 'name' => 'ABV.BG'],
[ 'url' => 'http://dir.bg/', 'name' => 'DIR.BG']
]
那么success函数将是:
success: function(data) {
$('#page').html(data.about.content);
$('title').html(data.about.title);
$.each(data.about.links(function(i, link) {
$('aside ul li').eq(i).children('a').attr('href', link.url).html(link.name);
});
}
正如 GolezTrol 的回答所指出的，.on() 的处理程序参数必须是一个函数:
$('nav ul li:nth-child(2) a').on('click', function(e) {
e.preventDefault();
$.ajax(...);
});
由于您是从本地主机加载页面，因此需要更改 jQuery URL 以访问网络:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
当您省略 URL 的协议(protocol)前缀时，它会使用与包含该 URL 的页面相同的协议(protocol)，对于本地文件，该协议(protocol)为 file:。但您需要使用 http: 或 https: 从网络获取某些内容。
关于javascript - 单击时使用 jQuery 和 AJAX 更改页面内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27532604/