本文介绍了如何使用Ajax实现点击左侧菜单时，右侧页面无刷新加载不同内容。通过荷载器.load()方法更新页面部分区域，并利用data-*属性存储和传递数据。在实际项目中，如流程管理后台的左右布局场景，这种方式能有效提高用户体验。同时，列举了创建多个html页面作为示例，便于理解。
实现：ajax实现点击左侧菜单，右侧加载不同网页（在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可）
图片.png
原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。
遇到ajax局部刷新的需求也有很多，有时候比较简单，当内容较少，适合做成选项卡，如果网页的左侧有一个列表，点击列表使右侧的内容进行切换，如果右侧的内容过多，不适合做选项卡，这时候用.load()局部刷新最好不过了，在项目中经常使用到流程管理后台，便是左右结构布局，这个时候，简单的demo示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>ajax局部刷新</title>
<style>
.userMenu {
float: left;
width: 200px;
}
#con
最低0.47元/天 解锁文章
扫一扫
2998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
