<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
   <style type="text/css">
   div#slider-img {width: 100%; height: 250px; top: 45px;}
   </style>
    <script type="text/javascript" charset="UTF-8">
      mui.init();
    </script>
    <script src="js/jquery-1.12.2.min.js" type="text/javascript" charset="utf-8"></script>
    <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("返回失败");
             }
          });
        mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR/Msg7TLJv5TjaQQ6Hpjxd+aWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS/PvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6/KXOnxX046I&encryption=1&canal=appstore',{
        dataType:'json',type:'get',timeout:10000, success:function(data){
        listDataAnalyze(data);
        },error:function(error){
        console.log("返回失败"+ error);
        }
        });
  });
 
function dataAnalyze(data){
    var arr = data.T1348647853363[0].ads;
    var finalList = null;
    var imgList = null;
    for(var i = 0; i<arr.length;i++){
     //轮播图标签结构
//    finalList = '<div class="mui-slider-item"><a href="http://www.baidu.com"><p class="mui-slider-title">'+arr[i].title+'</p> </a></div>'
finalList = '<div class="mui-slider-item"><a href="#"><img src='+arr[i].imgsrc+'></a></div>';
     //插入slider-img标签里面
      $("div#slider-img").append(finalList);
     //插入轮播标记
     $("#slider-indicator").append('<div class="mui-indicator"></div>');
//     插入完成必须初始化，否则图片不能滚动
     mui('.mui-slider').slider({
     interval:0//自动轮播周期，若为0则不自动播放，默认为0；
      });                  
    }
}
 
function listDataAnalyze(data) {
var listDetail = null;
var arrayobj = data.T1348647853363;
for (var i = 0; i < arrayobj.length;i++) {
console.log(arrayobj[i].title);
listDetail = '<li class="mui-table-view-cell mui-media><a href="#"><div class="mui-media-body">'+arrayobj[i].digest+'</div></a>></li>';
$("#tableView-List").append(listDetail);
}
}
 
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">aJax请求数据</h1>
</header>
 
  <div class="mui-slider " >
            <div class="mui-slider-group" id="slider-img">
              //图片、标题
            </div>
            <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
            <div class="mui-slider-indicator" id="slider-indicator">
            </div>
  </div>
<ul class="mui-table-view" id="tableView-List">
</ul>
</body>
</html>

在mui中创建aJax来请求数据..并展示在页面上的更多相关文章

  1. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

  2. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  3. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  4. ajax异步刷新请求数据

    AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XM ...

  5. jQuery的deferred对象使用详解——实现ajax线性请求数据

    最近遇到一个ajax请求数据的问题 ,就是想要请求3个不同的接口,然后请求完毕后对数据进行操作,主要问题就是不知道这3个请求誰先返回来,或者是在进行操作的时候不能保证数据都已经回来,首先想到能完成的就 ...

  6. 使用gulp创建ajax模拟请求

    概述 之前一直使用gulp构建前端项目,这个基于node流并崇尚“编程而非配置”的工具让我深深的爱上了他.强大的gulp能做到的不仅仅是压缩和合并js.css,它能做到的还有更多.今天我给大家带来使用 ...

  7. Struts2中通过Ajax传递json数据

    1.导入Struts2所需要的jar包 下载Struts2的jar包时,可以下载struts-2.5.13-min-lib.zip,然后放到项目的/WebContent/WEB-INF/lib路径下s ...

  8. 微信返回上一页，页面中的AJAX的请求，对Get请求无效的解决办法

    问题产生原因       最近在做一个微信的项目时,遇到一种很常见的情况,需求是这样的,当用户进入到"我的个人中心"的时候,会有一个点击跳转填写认证资料的按钮,点击此按钮后,会跳转 ...

  9. 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

    问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...

随机推荐

  1. ECLIPSE修改xml配置文件TOMCAT不生效的解决

    昨天和今天一直想研究一下SSH的项目,但把项目导入ECLIPSE后配置数据库时发现无论如何修改配置文件,TOMCAT上的文件还是旧文件,从未变过. 感觉很神奇也很崩溃,重启ECLIPSE,CLEAN, ...

  2. hadoop配置文件的参数含义说明

    #hadoop version 查看版本号 1 .获取默认配置 hadoop2系列配置文件一共包括6个,分别是hadoop-env.sh.core-site.xml.hdfs-site.xml.map ...

  3. How to Pronounce OPPORTUNITY

    How to Pronounce OPPORTUNITY Share Tweet Share Take the opportunity to learn this word!  Learn how t ...

  4. 疯狂JAVA——第五章 面向对象（上）

    5.1类和对象 构造器是一个类创建对象的根本途径,如果一个类没有构造器,这个类通常无法创建实例.通过new关键字来调用构造器,从而返回该类的实例. 类名:每个单词首字母大写,其他字母小写,单词之间不要 ...

  5. git hg提交拉取

    工作总结web_acl 535 git clone “ssh://git@outergit.yonyou.com:49622/esn_web/web_acl.git" 600 git bra ...

  6. R包和python对应的库

    数据库 类别 Python R MySQL mysql-connector-python(官方) RMySQL Oracle cx_Oracle ROracle Redis redis rredis ...

  7. cdoj203-Islands 【并查集】

    http://acm.uestc.edu.cn/#/problem/show/203 Islands Time Limit: 30000/10000MS (Java/Others)     Memor ...

  8. zoj1649-Rescue （迷宫最短路径）【bfs 优先队列】

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=649 Rescue Time Limit: 2 Seconds      Mem ...

  9. Parallel.Foreach的基础知识

    微软的并行运算平台(Microsoft’s Parallel Computing Platform (PCP))提供了这样一个工具,让软件开发人员可以有效的使用多核提供的性能. Visual Stud ...

  10. 【转】VS2012 中文版转英文版 英文版转中文版 界面语言切换

    [1]下载VS2012的语言包,各种语言包都有,下载对应的即可. 微软官网衔接地址:vs2012 语言包  http://www.microsoft.com/zh-CN/download/detail ...