jQuery load()简单的异步加载原理，可以用于分类导航异步加载

简单且简介的异步加载方式！可以用于分类导航异步加载对应分类的内容，加快页面首次加载时间

简单的实现原理：

点击“分类1”会加载“cs.php”的文件内容；

点击“分类2”会加载“cs2.php”的文件内容；

<div style="width:500px;margin:auto;">
<h3 id="test">测试异步加载</h3>
<button id="btn1" type="button">分类1</button>
<button id="btn2" type="button">分类2</button>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $('#test').load('/pc/home/cs.php');//服务器上的文件路径【相对路径】
  })
  $("#btn2").click(function(){
    $('#test').load('/pc/home/cs2.php');
  })
})
</script>
</div>

进阶方法：

<div style="width:500px;margin:auto;">
    
<h3 id="menu_content">测试异步加载</h3>
<?php for($x=1; $x<=5; $x++){ ?>
<a class="menu_<?php echo $x;?>" href="javascript:lt_menu_number()">分类<?php echo $x;?></a>
<?php } ?>

<script type="text/javascript">
$(document).ready(function(){
<?php for($x=0; $x<=5; $x++){ ?>
  $(".menu_<?php echo $x;?>").click(function(){
    $('#menu_content').load('/pc/home/article_list.php?id=<?php echo $x;?>');//服务器上的文件路径【相对路径】
  })
<?php } ?>
})
</script>
</div>

article_list.php文件

<?php
$id = $_GET['id'];


echo "获取的id：".$id."<br>";


if($id=="1"){
    echo "分类1";
}else if($id=="2"){
    echo "分类2";
}else if($id=="3"){
    echo "分类3";
}else if($id=="4"){
    echo "分类4";
}else if($id=="5"){
    echo "分类5";
}