使用HTML5开发App（三）

作者: 陶好达 | 来源:发表于2016-03-04 22:20 被阅读4212次

动态添加标签

接着上篇文章接下来要做的就是，从后台获取数据，然后赋值并显示，还记得上篇文章中轮播图和列表标签是静态添加的，那么问题来了，如果这个数据是从后台服务器那边获取的，拿轮播图为例，后台给我们返回10张图片的数据，那我们应该怎么创建标签呢？呃...可能有很多小伙伴读到这里没有明白什么意思，没关系你看完这篇文章就会明白的。

之前咱们的标签是这样写的

<div class="mui-slider ">
            <div class="mui-slider-group">
              <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img2.imgtn.bdimg.com/it/u=3435748019,1733487343&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题1</p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img1.imgtn.bdimg.com/it/u=933204148,833772717&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题2</p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img0.imgtn.bdimg.com/it/u=522735967,1809391751&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题3</p>
                    </a>
                </div>
            </div>
            <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>

在上面代码中看到的是一共三个img标签，那如果后台给返回10张图片，我们的这个结构应该怎么写呢？
这个时候我们需要从网络获取到数据，然后根据获取的数据数量进行循环创建标签并赋值。一口气说了这么长，那我们就一步一步来吧

第一步：使用Ajax网络请求

网络请求必须在mui.plusReady（）函数中进行，具体原因请查看官方文档http://ask.dcloud.net.cn/article/122
来看下首页轮播接口：
http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore
以下数据结构：


{
 "T1348647853363": [
  {
   "ads": [
    {
     "imgsrc": "http://img1.cache.netease.com/3g/2016/3/4/201603041128337df68.jpg",
     "subtitle": "",
     "tag": "photoset",
     "title": "人大发布会开始 傅莹为发言人",
     "url": "00AN0001|112244"
    },
    {
     "imgsrc": "http://img2.cache.netease.com/3g/2016/3/4/201603041111218ff8a.jpg",
     "subtitle": "",
     "tag": "photoset",
     "title": "人大预备会议开始 代表步入会场",
     "url": "00AN0001|112238"
    }
            ]
}

拿到接口之后，我们要去请求，如果请求成功，我们会走success这个回调函数，

 <script type="text/javascript" charset="utf-8">
       mui.init();
       mui.plusReady(function(){
           mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{
           dataType:'json',
           type:'get',//请求方式
           timeout:10000,//超时
           success:function(data){//成功
            
            },
            error:function(error){//失败
               console.log("返回失败");
             }
          });
  })
</script>

到这一步已经成功返回data，下一步要把返回过来的数据拿出来进行解析

第二步：数据解析

首先来分析一下，哪些数据是我们想要，显而易见图片和标题是我们想要获取到的。为了看起来比较清晰，我在这里重新写一个函数dataAnalyze()，在这个函数里面进行解析数据，在success回调里面去调用。

    function dataAnalyze(data){
    //图片和标题都在‘ads’这个数组中，首先要拿到这个数组，这里面使用点语法获取到数组。
      var arr = data.T1348647853363[0].ads;//获取到‘ads’数组
      for(var i = 0; i<arr.length;i++){
    //对数组遍历分别拿到图片和标题
        console.log(arr[i].imgsrc);
        console.log(arr[i].title);
       }
    }

dataAnalyze（）函数写好了之后，我们需要在success回调里面去调用

 <script type="text/javascript" charset="utf-8">
       mui.init();
       mui.plusReady(function(){
           mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{
           dataType:'json',
           type:'get',//请求方式
           timeout:10000,//超时
           success:function(data){//成功
            dataAnalyze(data);
            },
            error:function(error){//失败
               console.log("返回失败");
             }
          });
  })
</script>

第三步：动态创建标签并赋值

还记得上篇文章中写的轮播图吗？就是下面这一坨

<div class="mui-slider ">
            <div class="mui-slider-group">
              <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img2.imgtn.bdimg.com/it/u=3435748019,1733487343&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题1</p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img1.imgtn.bdimg.com/it/u=933204148,833772717&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题2</p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img0.imgtn.bdimg.com/it/u=522735967,1809391751&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题3</p>
                    </a>
                </div>
            </div>
            <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>

现在我们要做的就是把这些结构里面的mui-slider-item给删除掉，因为我们要做的是动态添加这些item，为了方便通过ID选择器查找到到对应标签，这里面添加了一个id，修改完成之后剩余如下代码：


  <div class="mui-slider ">
            <div class="mui-slider-group" id="slider-img">
              //图片、标题
            </div>
            <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
            <div class="mui-slider-indicator" id="slider-indicator">
              //图片滚动标记
            </div>
  </div>

接下来我们要在dataAnalyze（）函数里面去循环创建标签并且赋值，代码如下

function dataAnalyze(data){
    var arr = data.T1348647853363[0].ads;
    console.log(data);
    var finalList = null;
    for(var i = 0; i<arr.length;i++){
     console.log(arr[i].imgsrc);
     console.log(arr[i].title);
     //轮播图标签结构
      finalList = '<div class="mui-slider-item"><a href="#">[站外图片上传中……(7)]<p class="mui-slider-title">'+arr[i].title+'</p> </a></div>'
     //插入slider-img标签里面
      $("#slider-img").append(finalList);
     //插入轮播标记
     $("#slider-indicator").append('<div class="mui-indicator"></div>')
     //插入完成必须初始化，否则图片不能滚动
     mui('.mui-slider').slider({
     interval:0//自动轮播周期，若为0则不自动播放，默认为0；
      });                   
    }
}

这个时候我们就完成了动态创建，添加，赋值.轮播图已经完成。

轮播图

第四步：新闻列表赋值

开始给新闻列表创建赋值，还是来先看下新闻列表数据结构，列表页面要用的数据莫非就是图片、抬头、描述。

{
 "T1348647853363": [
  {
   "boardid": "3g_bbs",
   "clkNum": 0,
   "digest": "小伙送女友卫生巾，女友十分感动，还他了一个用过的。",
   "docid": "BHB8OPBL00964JJM",
   "downTimes": 0,
   "id": "BHB8OPBL00964JJM",
   "img": "http://img5.cache.netease.com/3g/2016/3/4/2016030417255966ffe.jpg",
   "imgsrc": "http://img5.cache.netease.com/3g/2016/3/4/2016030417255966ffe.jpg",
   "imgType": 0,
   "interest": "A",
   "lmodify": "2016-03-04 19:05:26",
   "picCount": 0,
   "program": "HY",
   "prompt": "成功为您推荐10条新内容",
   "ptime": "2016-03-04 18:57:12",
   "recReason": "热门文章（原创）",
   "recType": 0,
   "replyCount": 260,
   "replyid": "BHB8OPBL00964JJM",
   "source": "新闻七点整",
   "TAG": "语音",
   "TAGS": "语音",
   "template": "manual",
   "title": "新闻七点整：送你一车姨妈巾",
   "unlikeReason": [
    "原创/1",
    "来源:新闻七点整/4",
    "内容重复/6"
   ],
   "upTimes": 0
  }
 ]
}

为了让大家可以清晰看出来代码的逻辑，我这里面不做代码优化，我会继续写一个Ajax来请求数据列表数据，数据接口:
http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore

//列表数据请求
 mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{
   dataType:'json',
   type:'get',
   timeout:10000,
   success:function(data){

   },
   error:function(error){
    console.log("列表返回失败");
   }
 });

还是原来的套路，返回成功之后，我们为了清晰，再写一个名字为listDataAnalyze()函数用来专门用来解析列表的数据，并且创建标签并赋值。

  //用来处理列表数据的函数
    function listDataAnalyze(data){
   var arrayObj = data.T1348647853363;
   for(var i = 0; i<arrayObj.length;i++){
    console.log(arrayObj[i].title);
    finalList = '<li class="mui-table-view-cell mui-media"><a href="javascript:;">[站外图片上传中……(8)]<div class="mui-media-body">'+arrayObj[i].title+'<p class="mui-ellipsis">'+arrayObj[i].digest+'</div></a></li>';
    $("#tableView-List").append(finalList);
   }
    }

我们这个函数写完之后呢，来在数据请求成功之后调用此函数

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas; color: #a5b2b9}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas; color: #2eafa9}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas; color: #060606}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas; color: #6b82d9}span.s1 {color: #000000}span.s2 {color: #060606}span.s3 {color: #596972}span.s4 {color: #2eafa9}span.s5 {color: #ad5cff}span.s6 {color: #6b82d9}span.s7 {color: #b58a00}span.s8 {color: #3c7400}span.Apple-tab-span {white-space:pre}

 //列表数据请求
  mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{
   dataType:'json',
   type:'get',
   timeout:10000,
   success:function(data){
    listDataAnalyze(data);
   },
   error:function(error){
    console.log("列表返回失败");
   }
 });

还记得上一篇文章中列表的这一坨吗？

<ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(9)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
     <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(10)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(11)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(12)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(13)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(14)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(15)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(16)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
  </ul>

现在修改为下面代码，并且添加一个id为了方便获取。

  <ul class="mui-table-view" id="tableView-List">
     
  </ul>

好了，这个列表也已经加载出来了，效果如下：

效果

好了，大功告成，今天的学习就到这里，今天的内容代码改动可能比较大，感觉代码很多，其实跟着我的步骤一步一步来肯定能写出来，加油加油。我会准们出一篇文章讲解怎么抓包。

下集预告：TabBar图标修改，页面跳转

未完待续...

网友评论

云画的跃光:报错: url: net::ERR_CONNECTION_REFUSED
云画的跃光:想请求一份源码，我请求数据没有反应，邮箱：1435009717@qq.com,谢谢
云画的跃光:请求发一份源码给我，我敲着没数据显示，邮箱：1435009717@qq.com,谢谢
余文清:后台交互可以用PHP写嘛？可以的话怎么写呢？
摆摆_c54b:请问一下如何截图ajax跨域问题，我访问了url链接但是返回不了数据
啦啦队长vv:楼主，为什么我的ajax老是不能跨域，求回复
04e0c2a92779:为什么我的ajax毫无反应啊
骑在树上的骷髅怪:[ERROR] : ReferenceError: Can't find variable: $ 这个这么解决啊
嗨_雨:你好大神！html5有没有类似于OC中的封装呢，感觉重复写一样的代码好麻烦啊。可不可以分享一下呀🤗
595037c62fb5:能不能把你的代码发我一份呀，谢谢！ 897727696@qq.com
8b217b136b3b:大神，
d84a65d88d42:为什么按照你的方法写完了，轮播图就不显示了，并且没有加入后台数据时，轮播图不会自己滚动，本人菜鸟，望大神指点
56a94a71a1d9:大神，求源码
Mr_Lucifer: $("#slider-img").append(finalList); 这句报错 [ERROR] : ReferenceError: Can't find variable: $, 什么原因?
Mr_Lucifer:@长相离_莫相依如果是相同的错误，那就是这个问题。如果不是，可以问问.net同事，他们比较熟悉。
56a94a71a1d9:@Mr_Lucifer 为什么我加进去没反应
Mr_Lucifer:@Mr_Lucifer 自问自答吧, 作者给的代码文章里少说一点东西需要引入jquery : <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
小茗:能看懂,但写出来怎么都报错,作者,我也求源码了
nickfox:你好，你的这篇文章对现在的我很有用，我想要一下源码，可以吗？2609195880@qq.com
9b7d9d8c5360:看不懂- -
挠叔:好厉害好厉害学习了～
ed7985d4057e:支持
ed7985d4057e:@ed7985d4057e 已经搞定
ed7985d4057e: @小新的蜡笔丢了还没休息？现在遇到遇到加载分页的问题。分页内容是www.xxx.com/api/get?pages=2这种形式的，不知道怎么弄。
我的邮箱1055580792@qq.com
陶好达:@ed7985d4057e 给我一下你的邮箱吧，我给你发过去。😊😊
李大泽:加油加油加油
f92d8a69a1d0:杰哥，真厉害，加油，小弟会一直坐等的
陶好达:@丿Better小涛我在上海呢，等回北京了可以找我玩儿😄
f92d8a69a1d0:@TouchMe 最近还在清河？
陶好达:@丿Better小涛好的😍😍