ajax实现点击左侧菜单，右侧加载不同网页

实现点击左侧菜单改变右侧内容的功能时，除了可以使用iframe,我们还可以通过ajax来实现。

先来看一下实现的效果：





实现思路：

一、首先我们来实现首页的界面(我使用了bootstrap框架，来使界面更加好看)

新建一个html文件，body里的代码为下面的代码

<div class="container">
<div class="col-sm-2" id="left-content">
<div class="panel-group" id="accordion1">

<!--我的订单-->
<div class="panel panel-default">
<div class="panel panel-heading">
<h4 class="panel-title" style="text-align: center;">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">我的订单</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-12 left-menu"><a href="javascript:;" onclick="turnpage('food_order')">美食订单</a></div>
</div>
</div>
</div>
<!--我的评价-->
<div class="panel panel-default">
<div class="panel panel-heading">
<h4 class="panel-title" style="text-align: center;">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">我的评价</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-12 left-menu"><a href="javascript:;" onclick="turnpage('rates')">待评价</a></div>
<div class="col-sm-12 left-menu"><a href="javascript:;" onclick="turnpage('rated')">已评价</a></div>
</div>
</div>
</div>

</div>
</div>
<div class="col-sm-10" id="right-content">
<div class="mainbox">

</div>
</div>
</div>

其中left-content就是我们的左侧菜单，right-content来显示我们的每一个页面。

二、创建每个菜单的显示页面

在主页面中我们的左侧菜单里3个小菜单，因此我们来创建3个html文件，分别命名为item1.html 、item2.html 、item3.html。

每个页面的内容分别为页面1、页面2、页面3

三、创建主页面的js文件（我使用了jquery.js（ps:之前很少用，一直用的js,谁知道面试工作的时候都问我会不会jquery，只好练习jquery了））

function turnpage(url) {
var url0 = document.URL;
var num = url0.indexOf('?');
var oldurl;
if(num == -1) {
oldurl = url0;
} else {
oldurl = url0.slice(0, num);
}
var newurl = oldurl + '?' + url;
history.pushState(null, null, newurl);
var ajaxurl = url + '.html'
$.ajax({
type: "post",
url: ajaxurl,
success: function(html) {
$('.mainbox').html(html);
}
});
}

其中newurl是当我们点击不同的左侧菜单右侧显示不同内容时网页URL随之改变的，改变右侧内容的主要代码是ajax。

这样大致的功能就已经实现了。

如果右侧每个页面有自己的js和css文件，不要紧的，照常写在它自己的页面或在它页面中引入就可以，不必放在主页面中。