ajax异步加载html片段

最新推荐文章于 2021-06-09 22:59:44 发布

原创最新推荐文章于 2021-06-09 22:59:44 发布 · 9.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #html #导航

该博客介绍了一个使用Ajax实现的导航栏功能，当点击导航项时，通过异步加载HTML片段，动态更新右侧展示内容，从而避免了在主页面上预加载多个div和控制它们的显示隐藏。示例中展示了主页面的HTML结构和Ajax加载代码。

案例：在一个导航栏中，实现点击导航出现不同的选择区域，如图：

比较容易想到的是将右边的内容放在一个div里面，然后左边的每个li点击的时候，右边相应的div显示出来，而其他的div隐藏，这样就要在一个页面里面设置多个div，然后控制div的显示和隐藏。

这里我觉得用ajax异步加载html片段也是一个可行的方法，把右边的div提取出来写成页面片段，然后用ajax异步去获取相应的html片段。

主页面的HTML代码如下：

<body>
   <header class="header" id="header">
       <a href="javascript:history.go(-1);" class="back"><em class="icon30" data-icon="&#xe604;"></em></a>
       <div class="searchBox">
           <input type="text" class="chooseGoods"placeholder="搜索惊喜更多！">
           <em class="icon26 searchGoods" data-icon="&#xe90a;"></em>
       </div>
       <div class="searchMeun">
           <ul class="mu">
               <li><a href="#" rel="nofollow" class="hovLoad"><span>儿童寝居</span><em class="icon20 arr" data-icon=""></em></a></li>
               <li><a href="#" rel="nofollow" class="hovLoad"><span>儿童玩具</span><em class="icon20 arr" data-icon=""></em></a></li>
               <li><a href="#" rel="nofollow" class="hovLoad"><span>儿童食品</span><em class="icon20 arr" data-icon=""></em></a></li>
           </ul>
       </div>
   </header>
    <div class="classifyBox">
        <ul class="classifyNav">
            <li class="curr" onclick="loadXMLDoc(0)">品牌</li>
            <li onclick="loadXMLDoc(1)">年龄</li>
            <li>玩具</li>
            <li>用品</li>
            <li>居家</li>
            <li>食品</li>
        </ul>

        <div class="classifyDetail" id="classDiv">
            <div class="box">
                <img src="../images/tebuy/classifyBanner01.png"  class="banner" alt="">
                <ul>
                    <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age01.png" alt=""><span>儿童寝居</span></li>
                    <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age01.png" alt=""><span>儿童寝居</span></li>
                    <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age01.png" alt=""><span>儿童寝居</span></li>
                </ul>
         </div>        
        </div>
    </div>
</body>

Ajax异步加载代码如下:

<script>
     /*异步加载*/
    function loadXMLDoc(a)
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("classDiv").innerHTML=xmlhttp.responseText;
        }
      }
    if(a==0){
       $(".classifyNav li").removeClass("curr")
       $(".classifyNav li:eq(0)").addClass("curr")
       xmlhttp.open("POST","classDetail.html",true);
       xmlhttp.send();
      }
    if(a==1){
       $(".classifyNav li").removeClass("curr")
       $(".classifyNav li:eq(1)").addClass("curr")
       xmlhttp.open("POST","classDetailAge.html",true);
       xmlhttp.send();
      }
    };
</script>

   在上述JS中 document.getElementById("classDiv").innerHTML=xmlhttp.responseText;就是将id=classDiv的div里面的内容换成核心对象xmlhttp返回的数据也就是html片段classDetail.html和classDetailAge.html

classDetail.html代码如下:
<div class="box">
    <img src="../images/tebuy/classifyBanner01.png"  class="banner" alt="">
    <ul>
        <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age01.png" alt=""><span>儿童寝居</span></li>
        <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age01.png" alt=""><span>儿童寝居</span></li>
        <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age01.png" alt=""><span>儿童寝居</span></li>
    </ul>
</div>

classDetailAge.html代码如下:
<div class="box">
   <ul>
        <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age01.png" alt=""><span>0-1岁</span></li>
        <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age02.png" alt=""><span>1-3岁</span></li>
        <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age03.png" alt=""><span>3-6岁</span></li>
        <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age04.png" alt=""><span>6-9岁</span></li>
        <li onclick="window.location='http://baidu.com'"><img src="../images/tebuy/age05.png" alt=""><span>9岁以上</span></li>
    </ul>
</div>

   我们会发现两个html片段都是把class=box的这个div里面的内容换掉了，每个页面一次只有一个div加载出来，这样就实现了异步的加载html片段，而不是只在页面里面将相应的div显示或者隐藏。当然，我们还能把html片段里面的内容写成json格式，每次加载json里面的数据而不是加载html片段，这样更方便后台进行数据的增删改查。