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文件，不要紧的，照常写在它自己的页面或在它页面中引入就可以，不必放在主页面中。